Throttling and Debouncing in JavaScript
Jhey Tompkins
416

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,
 curFunc;
 function lowerTimeoutType(f){
 timeouttype=0;
 if (curFunc !== undefined){
 curFunc();
 curFunc = undefined;
 }
 };
 return cachedThrottleFuncs[ ~(
 ~cachedThrottleFuncs.indexOf(func) || 
 ~(
 cachedThrottleFuncs.push(function(Evt) {
 switch (timeouttype){
 case 0: // Execute immediatly
 ++timeouttype;
 func.call(Evt.target, Evt);
 setTimeout(lowerTimeoutType, minimumInterval);
 break;
 case 1: // Delayed execute
 curFunc = func.bind(Evt.target, Evt);
 Evt.preventDefault();
 }
 }) — 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();
 else
 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`.

Show your support

Clapping shows how much you appreciated lolzery wowzery’s story.