Last active
November 23, 2020 23:30
-
-
Save c-kick/04a828c3d233db2504ec3a810217bfc3 to your computer and use it in GitHub Desktop.
JavaScript function prototype debouncer v3.0 - debounces functions that are prone to repetitive calling (on events such as mousewheel, orientationchange, resize, etc)
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
/** | |
* | |
* | |
* 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