Skip to content
-
JavaScript Throttling
Last Updated :
28 Jan, 2025
Throttling is a technique used to limit the number of times a function can be executed in a given time frame. It’s extremely useful when dealing with performance-heavy operations, such as resizing the window or scrolling events, where repeated triggers can lead to performance issues.
JavaScript
function throttle(fn, delay) {
let lastTime = 0;
return function (...args) {
let now = Date.now();
if (now - lastTime >= delay) {
fn.apply(this, args);
lastTime = now;
}
};
}
In this example
- The throttle function takes a function (fn) and a delay (delay) as parameters.
- It keeps track of the last execution time using lastTime.
- When the function is called, it checks if the time difference from the last execution is greater than or equal to the delay.
- If so, it executes the function and updates lastTime.
Why is Throttling Needed?
Certain user interactions, like scrolling or window resizing, trigger events multiple times per second. Executing event handlers at such a high frequency can lead to performance issues, including:
- Increased CPU and memory usage.
- Unresponsive user interfaces.
- Inefficient API calls leading to server strain.
By throttling a function, we can ensure it executes at a controlled rate, reducing resource consumption and improving responsiveness.
How Throttling Works
Throttling works by restricting the execution of a function so that it runs at most once every predefined period, even if the event is triggered multiple times within that interval.
- A function is triggered multiple times due to an event (e.g., scroll, resize).
- Throttling ensures that the function executes only once within the defined interval.
- Any additional triggers during the interval are ignored until the next cycle starts.
- Once the interval is over, the function can execute again if triggered.
Implementing Throttling in JavaScript
1. Using setTimeout
A simple way to implement throttling is by using setTimeout. The function execution is delayed and only runs after the specified time interval has passed.
JavaScript
function throttle(fn, delay) {
let isThr = false;
return function (...args) {
if (!isThr) {
fn.apply(this, args);
isThr = true;
setTimeout(() => {
isThr = false;
}, delay);
}
};
}
window.addEventListener('scroll', throttle(() => {
console.log('Scroll event triggered!');
}, 1000));
2. Using Date.now()
Another approach is to use Date.now() to keep track of the last execution time and determine when the function should be called again.
JavaScript
function throttle(fn, delay) {
let t = 0;
return function (...args) {
let now = Date.now();
if (now - t >= delay) {
fn.apply(this, args);
t = now;
}
};
}
window.addEventListener('resize', throttle(() => {
console.log('Resize event triggered!');
}, 500));
Difference Between Throttling and Debouncing
Both throttling and debouncing are techniques for controlling function execution, but they serve different purposes:
| Feature | Throttling | Debouncing |
|---|
| Execution Control | Ensures function runs at most once per interval | Delays function execution until event stops |
| Best Use Cases | Scroll events, API calls, keypress handling | Search input, auto-save, form validation |
| Frequency of Execution | Runs at regular intervals | Runs only once after a delay |
Use Cases of Throttling
Throttling is commonly used in cases where frequent execution of a function can cause performance issues.
- Handling Scroll Events: Optimizing infinite scrolling by limiting API calls.
- Window Resize Events: Preventing excessive recalculations and re-renders.
- API Rate Limiting: Ensuring a function making API requests does not exceed allowed limits.
- Mouse Move Events: Improving efficiency in drag-and-drop interactions.
Similar Reads
Foundation CSS JavaScript Throttle Utility Foundation CSS is an open-source front-end framework that is used to create a beautiful responsive website, apps, or email quickly and easily. ZURB published it in September of that year. Numerous businesses, like Facebook, eBay, Mozilla, Adobe, and even Disney, make use of it. This framework, which
2 min read
Lodash _.throttle() Method The Lodash _.throttle() method limits a function’s execution to once every specified time interval, preventing it from being called too frequently. It’s ideal for performance optimization in events like scrolling or resizing, with built-in methods to cancel or immediately invoke delayed calls.Moreov
3 min read
How to change video playing speed using JavaScript ? In this article, we will see how we can change the playback speed of videos embedded in an HTML document using an HTML5 video tag.We can set the new playing speed using the playbackRate attribute. It has the following syntax.Syntax:let video = document.querySelector('video')video.playbackRate = newP
1 min read
How to change video playing speed using JavaScript ? In this article, we will see how we can change the playback speed of videos embedded in an HTML document using an HTML5 video tag.We can set the new playing speed using the playbackRate attribute. It has the following syntax.Syntax:let video = document.querySelector('video')video.playbackRate = newP
1 min read
Difference between Debouncing and Throttling Debouncing and throttling are techniques used to optimize the performance of functions triggered by events that occur frequently, such as scrolling, resizing, or typing. They help in managing how often these functions are executed, which can improve user experience and system performance. Here’s a d
4 min read
Underscore.js _.throttle() Function The _.throttle() method in underscore is used to create a throttled function that can only call the func parameter maximally once per every wait milliseconds. The throttled function has a cancel method which is used to cancel func calls that are delayed and it also has a flush method which is used t
2 min read
`;
$(commentSectionTemplate).insertBefore(".article--recommended");
}
loadComments();
});
});
function loadComments() {
if ($("iframe[id*='discuss-iframe']").length top_of_element && top_of_screen articleRecommendedTop && top_of_screen articleRecommendedBottom)) {
if (!isfollowingApiCall) {
isfollowingApiCall = true;
setTimeout(function(){
if (loginData && loginData.isLoggedIn) {
if (loginData.userName !== $('#followAuthor').val()) {
is_following();
} else {
$('.profileCard-profile-picture').css('background-color', '#E7E7E7');
}
} else {
$('.follow-btn').removeClass('hideIt');
}
}, 3000);
}
}
});
}
$(".accordion-header").click(function() {
var arrowIcon = $(this).find('.bottom-arrow-icon');
arrowIcon.toggleClass('rotate180');
});
});
window.isReportArticle = false;
function report_article(){
if (!loginData || !loginData.isLoggedIn) {
const loginModalButton = $('.login-modal-btn')
if (loginModalButton.length) {
loginModalButton.click();
}
return;
}
if(!window.isReportArticle){
//to add loader
$('.report-loader').addClass('spinner');
jQuery('#report_modal_content').load(gfgSiteUrl+'wp-content/themes/iconic-one/report-modal.php', {
PRACTICE_API_URL: practiceAPIURL,
PRACTICE_URL:practiceURL
},function(responseTxt, statusTxt, xhr){
if(statusTxt == "error"){
alert("Error: " + xhr.status + ": " + xhr.statusText);
}
});
}else{
window.scrollTo({ top: 0, behavior: 'smooth' });
$("#report_modal_content").show();
}
}
function closeShareModal() {
const shareOption = document.querySelector('[data-gfg-action="share-article"]');
shareOption.classList.remove("hover_share_menu");
let shareModal = document.querySelector(".hover__share-modal-container");
shareModal && shareModal.remove();
}
function openShareModal() {
closeShareModal(); // Remove existing modal if any
let shareModal = document.querySelector(".three_dot_dropdown_share");
shareModal.appendChild(Object.assign(document.createElement("div"), { className: "hover__share-modal-container" }));
document.querySelector(".hover__share-modal-container").append(
Object.assign(document.createElement('div'), { className: "share__modal" }),
);
document.querySelector(".share__modal").append(Object.assign(document.createElement('h1'), { className: "share__modal-heading" }, { textContent: "Share to" }));
const socialOptions = ["LinkedIn", "WhatsApp","Twitter", "Copy Link"];
socialOptions.forEach((socialOption) => {
const socialContainer = Object.assign(document.createElement('div'), { className: "social__container" });
const icon = Object.assign(document.createElement("div"), { className: `share__icon share__${socialOption.split(" ").join("")}-icon` });
const socialText = Object.assign(document.createElement("span"), { className: "share__option-text" }, { textContent: `${socialOption}` });
const shareLink = (socialOption === "Copy Link") ?
Object.assign(document.createElement('div'), { role: "button", className: "link-container CopyLink" }) :
Object.assign(document.createElement('a'), { className: "link-container" });
if (socialOption === "LinkedIn") {
shareLink.setAttribute('href', `https://www.linkedin.com/sharing/share-offsite/?url=${window.location.href}`);
shareLink.setAttribute('target', '_blank');
}
if (socialOption === "WhatsApp") {
shareLink.setAttribute('href', `https://api.whatsapp.com/send?text=${window.location.href}`);
shareLink.setAttribute('target', "_blank");
}
if (socialOption === "Twitter") {
shareLink.setAttribute('href', `https://twitter.com/intent/tweet?url=${window.location.href}`);
shareLink.setAttribute('target', "_blank");
}
shareLink.append(icon, socialText);
socialContainer.append(shareLink);
document.querySelector(".share__modal").appendChild(socialContainer);
//adding copy url functionality
if(socialOption === "Copy Link") {
shareLink.addEventListener("click", function() {
var tempInput = document.createElement("input");
tempInput.value = window.location.href;
document.body.appendChild(tempInput);
tempInput.select();
tempInput.setSelectionRange(0, 99999); // For mobile devices
document.execCommand('copy');
document.body.removeChild(tempInput);
this.querySelector(".share__option-text").textContent = "Copied"
})
}
});
// document.querySelector(".hover__share-modal-container").addEventListener("mouseover", () => document.querySelector('[data-gfg-action="share-article"]').classList.add("hover_share_menu"));
}
function toggleLikeElementVisibility(selector, show) {
document.querySelector(`.${selector}`).style.display = show ? "block" : "none";
}
function closeKebabMenu(){
document.getElementById("myDropdown").classList.toggle("show");
}