Throttling and Debouncing in JavaScript
Jhey Tompkins

You do **not** need a big segment of code for a decent throttle function. The purpose of a throttle function is to reduce browser resources, not to apply so much overhead that you are using even more. Also, my different uses for throttle functions require many different circumstances for them. Here is my list of things that a ‘good’ throttle function needs that this one has.

* Minimal overhead.
* Immediate function call if it has been more than *interval* MS since the last call.
* Avoiding executing function for another *interval* MS.
* Delaying excessive event firing instead of dropping the event altogether.
* Updates the delayed event when need be so that it doesn’t become ‘stale’.
* Prevents the default action of the event when the throttled function is delayed.
* Be able to remove the throttle event listener listener.

And, I believe that the following throttle function satisfies all of those.

var cachedThrottleFuncs = [],
 minimumInterval = 200; // minimum interval between throttled function calls
 function throttle(func, obj, evt) {
 var timeouttype = 0,
 function lowerTimeoutType(f){
 if (curFunc !== undefined){
 curFunc = undefined;
 return cachedThrottleFuncs[ ~(
 ~cachedThrottleFuncs.indexOf(func) || 
 cachedThrottleFuncs.push(function(Evt) {
 switch (timeouttype){
 case 0: // Execute immediatly
 ++timeouttype;, Evt);
 setTimeout(lowerTimeoutType, minimumInterval);
 case 1: // Delayed execute
 curFunc = func.bind(, Evt);
 }) — 1
 function listen(obj, evt, func){
 obj.addEventListener(evt, throttle(func, obj, evt));
 function mute(obj, evt, func){
 obj.removeEventListener(evt, throttle(func, obj, evt));

Example usage:

listen(document.body, ‘scroll’, function whenbodyscrolls(){
 if (document.body.scrollTop > 400)
 mute(document.body, ‘scroll’, whenbodyscrolls();
 console.log(‘Body scrolled!’)

By default, this throttles the function to at most one call every 200ms. To change the interval to a different number of milliseconds, then simply change the value of `minimumInterval`.

Like what you read? Give lolzery wowzery a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.