A brief analysis of throttle and debounce in javascript_Basic knowledge

throttle

The throttle we are talking about here means function throttling. To put it more simply, the frequency controller of function calls is the continuous execution time interval control. Main application scenarios include:

1. Mouse movement, mousemove event
2. Dynamic positioning of DOM elements, resize and scroll events of window object

Someone vividly compared the above incident to the firing of a machine gun. Throttle is the trigger of the machine gun. If you don't release the trigger, it will keep firing. The same goes for the above events we use during development. If you don't release the mouse, its events will keep firing. For example:

Copy code The code 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 means that the calling method will only be executed when the idle time must be greater than or equal to a certain value. debounce is the interval control of idle time. For example, when we do autocomplete, we need to have good control over the time interval between calling methods when entering text. Generally, the first input character is called immediately, and the execution method is called repeatedly according to a certain time interval. It is especially useful for abnormal input, such as pressing and holding a certain building.

The main application scenarios of debounce are:
Text input keydown event, keyup event, such as autocomplete

There are many online methods of this kind. For example, Underscore.js encapsulates throttle and debounce. jQuery also has a throttle and debounce plug-in: jQuery throttle / debounce. All the principles are the same and the same functions are implemented. Here is another throttle and debounce control function that I have been using:

Copy the code The code is as follows:

/*
* When the frequency control return function is called continuously, the execution frequency of fn is limited to once every time
* @param fn {function} The function that needs to be called
* @param delay {number} Delay time in milliseconds
* @param immediate {bool} Pass false to the immediate parameter and the bound function will be executed first, not after delay.
* @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);
                                                                                                                                   >= 0 ) {
                                        exec();                                                                                                                                  🎜> last_call = curr;
}
};

/*
* When the idle control return function is called continuously, the idle time must be greater than or equal to delay, and fn will be executed
* @param fn {function} To be called Function
* @param delay {number} Idle time
* @param immediate {bool} Pass false to the immediate parameter. The bound function will be executed first, not after delay.
* @return {function}The actual function called
*/

var debounce = function (fn, delay, immediate) {
return throttle(fn, delay, immediate, true);