Recently I was working on an HTA which contained an element that I wanted to be resized when the window resized. The issue was that I only wanted the resizing to occur after 0.5 seconds elapsed in which the user was not resizing the window. For this reason the debounce function was born (or re-invented since it already is available in other JS libraries):
/**
* @license Debounce - By Chris West - MIT License
*
* Creates a debounced copy of the function which when called will delay the
* execution until the specified amount of milliseconds have elapsed since the
* last time it ran.
* @param {!Function} fnCallback The function to debounce. The context and
* parameters sent to the debounced function will be sent to this function.
* @param {number} delay The amount of milliseconds that must pass since the
* last call to this function before fnCallback will be invoked.
* @param {boolean=} immediate Optional. Defaults to false. Specify true if
* the debounce function should run immediately instead of initially waiting
* for the delay. If true is specified, when the debounced function runs,
* if the delay has elapsed, the value returned from the debounced function
* will be that which was returned by fnCallback.
* @return {!Function} The debounced copy of fnCallback.
*/
function debounce(fnCallback, delay, immediate) {
var timeout, ready = 1;
return function() {
var args = arguments, context = this;
clearTimeout(timeout);
timeout = setTimeout(function() {
if(!(ready = immediate)) {
fnCallback.apply(context, args);
}
}, delay);
if(immediate && ready) {
return ready = 0, fnCallback.apply(context, args);
}
};
}
The above debounce function works the same way as Underscore.js’s debounce function. The only difference is that the code is just a tad bit shorter when minified. I will probably end up adding this function to the next version of jPaq, but until then feel free to use the above snippet yourself. 8)
