Demystifying Throttling in Javascript
Throttling in JavaScript is a technique used to limit the number of times a function can be called within a certain period. Throttling can be useful in situations where a function can be called frequently, such as during a scroll event or an input event, but it is not necessary to execute the function every time it is called. Throttling can also be used to limit the number of requests made to a server, which can improve performance and reduce the risk of overloading the server.
There are two main types of throttling: time-based throttling and count-based throttling. Time-based throttling limits the frequency of function calls based on time intervals, while count-based throttling limits the number of function calls based on a specific count.
Time-based Throttling
Time-based throttling limits the number of function calls based on a specific time interval. For example, if you want to limit the number of times a function can be called to once every 500 milliseconds, you can use the following code:
function throttle(func, limit) {
let lastFunc;
let lastRan;
return function() {
const context = this;
const args = arguments;
if (!lastRan) {
func.apply(context, args);
lastRan = Date.now();
} else {
clearTimeout(lastFunc);
lastFunc = setTimeout(function() {
if ((Date.now() - lastRan) >= limit) {
func.apply(context, args);
lastRan = Date.now();
}
}, limit - (Date.now() - lastRan));
}
}
}
const throttledFunction = throttle(function() {
console.log('This function will only execute once every 500 milliseconds');
}, 500);
window.addEventListener('scroll', throttledFunction);
In the above example, the throttle function takes two arguments: the function to be throttled and the time interval in milliseconds. The throttle function returns a new function that can be called instead of the original function. This new function checks the time since the last function call and only executes the function if the time interval has elapsed.
Count-based Throttling
Count-based throttling limits the number of function calls based on a specific count. For example, if you want to limit the number of times a function can be called to five times, you can use the following code:
function throttle(func, limit) {
let count = 0;
return function() {
const context = this;
const args = arguments;
if (count < limit) {
func.apply(context, args);
count++;
}
}
}
const throttledFunction = throttle(function() {
console.log('This function will only execute five times');
}, 5);
for (let i = 0; i < 10; i++) {
throttledFunction();
}
In the above example, the throttle function takes two arguments: the function to be throttled and the maximum number of times the function can be called. The throttle function returns a new function that can be called instead of the original function. This new function checks the count of function calls and only executes the function if the count is less than the maximum number of function calls.
Conclusion
Throttling in JavaScript can be a useful technique to limit the number of function calls in certain situations. Time-based throttling can be used to limit the frequency of function calls based on time intervals, while count-based throttling can be used to limit the number of function calls based on a specific count. By using throttling, you can improve performance and reduce the risk of overloading servers.
Happy Learning!! Happy Coding!!
Comments