This function aims to provide both function throttling and debouncing in as few bytes as possible.
-
-
Save eliperelman/1148518 to your computer and use it in GitHub Desktop.
Throttling and Debouncing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function( | |
| a, // true to debounce, false to throttle | |
| b, // how long to either disallow further (throttle) executions or delay the current (debounce) execution | |
| c, // the callback to throttle or debounce | |
| d // placeholder for holding current timeout context | |
| ) { | |
| return function() { // return a new function that | |
| if(a)clearTimeout(d); // if we are debouncing, clear the timeout and | |
| if(a||!d)d=setTimeout(function() { d = null; c()}, b); // if debouncing and an operation running, | |
| } // assign a new timer to run the supplied callback | |
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function(a,b,c,d){return function(){if(a)clearTimeout(d);if(a||!d)d=setTimeout(function(){d=null;c()},b)}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| DO WHAT THE **** YOU WANT TO PUBLIC LICENSE | |
| Version 2, December 2004 | |
| Copyright (C) 2011 Eli Perelman <http://eliperelman.com> | |
| Everyone is permitted to copy and distribute verbatim or modified | |
| copies of this license document, and changing it is allowed as long | |
| as the name is changed. | |
| DO WHAT THE **** YOU WANT TO PUBLIC LICENSE | |
| TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION | |
| 0. You just DO WHAT THE **** YOU WANT TO. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "throttleAndDebounce", | |
| "description": "Function throttling or debouncing.", | |
| "keywords": [ | |
| "throttle", | |
| "debounce", | |
| "function", | |
| "delay", | |
| "timeout" | |
| ] | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <title>Throttle or Debounce</title> | |
| <script> | |
| var throttleOrDebounce = function(a,b,c,d){return function(){if(a)clearTimeout(d);if(a||!d)d=setTimeout(function(){d=null;c()},b)}}; | |
| var log = function() { | |
| console.log('waiting to execute...sigh'); | |
| }; | |
| var debounce = throttleOrDebounce(true, 10000, log); | |
| // won't log until 10 seconds of not calling debounce() have elapsed | |
| debounce(); | |
| debounce(); | |
| debounce(); | |
| debounce(); | |
| debounce(); | |
| var throttle = throttleOrDebounce(false, 10000, log); | |
| // will log ONLY ONCE after 10 seconds have elapsed no matter how many times throttle() is called | |
| throttle(); | |
| throttle(); | |
| throttle(); | |
| throttle(); | |
| throttle(); | |
| throttle(); | |
| throttle(); | |
| </script> |
It's funny you mention that, because I had really considered making this into two separate functions. I'll make this one into just debounce and move throttle into a separate gist. Is there anything in particular you are looking to see come out of this?
i'm not sure each gist would really stand on its own, to be honest, since they'd each just be a wrapper on setTimeout.
Hmm. Looks like I may need to rethink what kind of functionality to get out of this.
if(a)clearTimeout(d); // 21 bytes
// could be written as:
a&&clearTimeout(d); // 19 bytes
This is not useful for event handlers because the function doesn't have the arguments applied.
e = arguments; // cache arguments
a&&clearTimeout(d); // if we are debouncing, clear the timeout and
if(a||!d)d=setTimeout(function() { d = null; c.apply(d, e)}, b); // if debouncing and an operation running,Also if you change the order of the arguments you could have defaults. Eg. throttle and default to a time of 100
throttleOrDebounce(log, /* 100, false */ );
throttleOrDebounce(log, 150, true );And
e = arguments; // cache arguments
c&&clearTimeout(d); // if we are debouncing, clear the timeout and
if(c||!d)d=setTimeout(function() { d = null; a.apply(d, e)}, b || 100); // if debouncing and an operation running,
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
remember, the point of @140bytes is to pack punch into 140 bytes: you still have a lot of room here, which i think could be well spent providing two separate functions without the boolean toggle.