Understand the concept of throttling in JavaScript to improve the performance of your web application and optimize the event handling in JavaScript, by limiting API calls or DOM events.
Anuj Sharma
Last Updated Jan 20, 2025
Throttling in javascript is a very frequently used technique nowadays to improve performance by limiting the number of calls when the user uses any web application and there is a function call which used to happen on an event, In this case, we can't control the user behaviour but behind the scenes, we can limit the function calls so that there won't be any performance issue. Let's see the implementation and how it works.
Throttling is a technique in JavaScript that limits the number of function calls in a certain interval. This technique can also help in improving web application performance
by limiting the number of function calls in cases where a frequent number of calls are happening.
Throttling can also be used to limit the function callbacks associated with the events
in javascript, there are a few types of events that generate a large number of callback function calls when events happen for example scrolling and window resize events. These events generate an event call back for each pixel change, but in practical scenarios, there is no requirement to call a function on every pixel change.
In these cases, throttling can be used to limit the number of function calls on event change and it is helpful to optimize event handling
in JavaScript.
The throttle function takes a callback function and an interval, it returns the throttled function. Now the throttled function allows to invoke the actual function once during the mentioned time interval. It doesn't matter how many times the function got involved during the interview but the function will run only once.
true
to make sure it will run the first time immediately when the function is called.false
and have a setTimout logic to make sure the flag will turn true
only after the mentioned input interval
.// ⚡ Throttling Implementation Code
const throttle = function (callback, interval) {
// True allows function call for the first time
let isCallAvailable = true;
// It returns a new throttled function
return function () {
// Captures context and arguments from the throttled function
const context = this;
const args = arguments;
// Limit the function call through flag.
if (isCallAvailable) {
// Called throttled function
callback.apply(context, args);
isCallAvailable = false;
// Set timer to limit the availability of function call through flag for a certain interval
setTimeout(() => {
isCallAvailable = true;
}, interval);
}
};
};
How to use the throttle function.
function throttleExample() {
console.log('Throttling Example');
}
/*
The new throttledFunction will limit the call once in 5000 secs
even though there are many function calls during this interval.
*/
const throttledFunction = throttle(throttleExample, 5000);
Throttling the callback function limits the function call registered with the scrolling event.
let counter = 0;
let throttleCount = 0;
// function without throttling
const withoutThrottle = function () {
counter++;
console.log("resize window...", counter);
};
// throttled function
const resizeWindow = function () {
throttleCount++;
console.log("throttled resize window...", throttleCount);
};
const ThrottledFunction = throttle(resizeWindow, 1000);
window.addEventListener("resize", withoutThrottle);
window.addEventListener("resize", ThrottledFunction);
Output
/*
For the scroll event to work, there should be a scroll bar
<div style="height: 500px" id="app"></div>
*/
let counter = 0;
let throttleCount = 0;
// function without throttling
const withoutThrottle = function () {
counter++;
console.log("scroll window...", counter);
};
// throttled function
const scrollWindow = function () {
throttleCount++;
console.log("throttled scroll window...", throttleCount);
};
const ThrottledFunction = throttle(scrollWindow, 1000);
window.addEventListener("scroll", withoutThrottle);
window.addEventListener("scroll", ThrottledFunction);
Output
Throttling in javascript is a very important technique to know, in order to improve performance by limiting API calls to the server or optimizing event handling in the web application. "How to limit a function call, when the function call invocation is happening very frequently" is a very common frontend interview question to limit the function calls based on the throttling
technique, that function can have any specific job like sending analytics to the server, logging data to the server, changing UI effect etc.
Hope this post helps you to understand the throttling in javascript very effectively. Happy Coding :)
Anuj Sharma
Last Updated Jan 20, 2025
Understand the concept of Debouncing in JavaScript to improve the performance of your web application and optimize the event handling in JavaScript, by limiting API calls or DOM events.
Anuj Sharma
Last Updated Jan 5, 2025
A comprehensive explanation about using javascript:void(0) in javascript. When to use javascript:void(0) and how it works with examples of using it with anchor tag.
Anuj Sharma
Last Updated Jan 2, 2025
Understand important web authorization techniques to enhance role-based authentication for any web application with popular techniques like Session & JSON Web Token (JWT)
Anuj Sharma
Last Updated Jan 9, 2025
Go through different ways to display dates using javascript date object. It covers examples of date object usage to understand the main concepts of javascript date object.
Anuj Sharma
Last Updated Jan 29, 2025
Understand the difference between HTTP/2 vs HTTP/1.1 based on the various parameters, which helps to understand the improvement areas of HTTP/2 over HTTP 1.1
Anuj Sharma
Last Updated Jan 28, 2025
An Interview-focused explanation of Promise Polyfill in JavaScript which helps to understand both Functional and ES6 custom promise implementation.
© 2024 FrontendGeek. All rights reserved