throttle
The throttle we are talking about here means function throttling. To put it simply, the frequency controller of function calls is to continuously perform time interval control. Main application scenarios such as:
1. Mouse Move event
2. Dynamic positioning of DOM elements, resize and scroll events of window objects
Some people vividly compare the incident mentioned above to the strafing of a machine gun. The throttle is the trigger of the machine gun. If you don’t put the trigger, it will keep firing. The same is true for the above events we used during development. If you don’t release the mouse, its events will always be triggered. For example:
The code copy is as follows:
var resizeTimer=null;
$(window).on('resize',function(){
if(resizeTimer){
clearTimeout(resizeTimer)
}
resizeTimer=setTimeout(function(){
console.log("window resize");
},400);
Debounce
Debounce is very similar to throttle. Debounce is a method that will be executed when the free time must be greater than or equal to a certain value. debounce is the interval control of free time. For example, when we do autocomplete, we need to control the time interval of calling the method when entering text. Generally, the first input character starts calling immediately, and the executed method is repeatedly called according to a certain time interval. It is particularly useful for abnormal inputs, such as holding down a certain one and not putting it.
The main application scenarios of debounce are:
Text input keydown event, keyup event, for example, autocomplete
There are many methods for this type of online, such as Underscore.js encapsulates throttle and debounce. jQuery also has a plug-in for throttle and debounce: jQuery throttle/debounce. All principles are the same and the same functions are implemented. Here is another throttle and debounce control function that I have been using again:
The code copy is as follows:
/*
* When the frequency control return function is called continuously, the fn execution frequency is limited to how many times it is executed every time
* @param fn {function} Functions that need to be called
* @param delay {number} Delay time in milliseconds
* @param immediate {bool} Pass false to the immediate parameter The bound function is executed first, rather than delayed and then executed.
* @return {function}actually call the function
*/
var throttle = function (fn,delay, immediate, debounce) {
var curr = +new Date(),//Current event
last_call = 0,
last_exec = 0,
timer = null,
diff, //Time difference
context,//context
args,
exec = function () {
last_exec = curr;
fn.apply(context, args);
};
return function () {
curr= +new Date();
context = this,
args = arguments,
diff = curr - (debounce ? last_call : last_exec) - delay;
clearTimeout(timer);
if (debounce) {
if (immediate) {
timer = setTimeout(exec, delay);
} else if (diff >= 0) {
exec();
}
} else {
if (diff >= 0) {
exec();
} else if (immediate) {
timer = setTimeout(exec, -diff);
}
}
last_call = curr;
}
};
/*
* When the idle control return function is called continuously, the idle time must be greater than or equal to delay before fn will be executed.
* @param fn {function} The function to be called
* @param delay {number} free time
* @param immediate {bool} Pass false to the immediate parameter The bound function is executed first, rather than delayed and then executed.
* @return {function}actually call the function
*/
var debounce = function (fn, delay, immediate) {
return throttle(fn, delay, immediate, true);