Skip to content

Instantly share code, notes, and snippets.

@c-kick
Last active Nov 23, 2020
Embed
What would you like to do?
JavaScript function prototype debouncer v3.0 - debounces functions that are prone to repetitive calling (on events such as mousewheel, orientationchange, resize, etc)
/**
*
*
* DEPRECATED, SEE NEW VERSION AT https://gist.github.com/c-kick/d359fce36257cf4c9fb5ea5f2c0033b6
*
*
* JavaScript function prototype debouncer 3.0 - hnldesign.nl
* Based on code by Paul Irish and the original debouncing function from John Hann
* http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
* Register deBouncer as a function prototype.
*
* Usage:
*
* original: window.addEventListener('onorientationchange', myFunction, false);
* debounced: window.addEventListener('onorientationchange', myFunction.deBounce(100, false, false), false);
*
* or
*
* orginal: myFunction(arguments);
* debounced: myFunction.deBounce(100, true, true)(arguments);
*
* @memberOf(Object)
* @name deBounce
* @property
*
* @param {int} threshold - Time in ms to wait for repeated calls.
*
* @param {boolean} execFirst
* True: Function is executed, subsequent calls are stopped during threshold.
* False: calls are stopped during threshold, when it passes, function is called.
*
* @param {boolean} execAfterThreshold
* True: continue executing immediately after the threshold has passed, while the function is still being called.
* False: threshold serves as 'cool down' period; only if function calls have ended, and threshold passes, function can be called again.
*
* @returns {function} - The debounced function
*/
if (typeof Function.prototype.deBounce !== 'function') {
Object.defineProperty(Function.prototype, 'deBounce', {
value : function (threshold, execFirst, execAfterThreshold) {
'use strict';
var func = this;
func.threshold = threshold;
if (func.debounced !== undefined) {
return this.debounced;
} else {
func.debounced = function () {
var obj = this,
args = arguments;
function delayed() {
if (!execFirst) {
func.apply(obj, args);
}
func.timeout = null;
}
if (!func.timeout) {
if (execFirst) {
func.apply(obj, args);
}
func.timeout = setTimeout(delayed, func.threshold || 100);
} else if (func.timeout && !execAfterThreshold) {
clearTimeout(func.timeout);
func.timeout = setTimeout(delayed, func.threshold || 100);
}
};
return func.debounced;
}
}
});
}
/**
* Wraps the deBouncer for easy use in jQuery
* Usage:
* jQdeBounce($, 'smartresize', 'resize', 20); //creates the function
* $(window).smartresize(function () { //use the function
* console.log('jquery resize debounce');
* });
*
* @param {object} $ The jQuery object to register in.
* @param {function} createMethod The debounced method/function to create.
* @param {function} originalMethod The original method/function to use as source
*/
if (window.jQuery) {
var jQdeBounce = function ($, createMethod, originalMethod, thresh, execAsap) {
'use strict';
$.fn[createMethod] = function (fn) { return fn ? this.bind(originalMethod, fn.deBounce(thresh, execAsap)) : this.trigger(createMethod);};
};
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment