Analysis of throttle and debounce in javascript

Throttle

The throttle here refers to the function throttling. In other words, the frequency controller of function calls is the continuous execution interval control. Main application scenarios include:

1. Move the mouse and move the mousemove event
2. DOM element dynamic positioning, window object resize and scroll events

Someone uses the above-mentioned event image as a machine gun scan. throttle is the trigger of the machine gun. If you don't trigger the trigger, it will always scan. 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:
Copy codeThe 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 similar to throttle. debounce executes the call method only when the idle time must be greater than or equal to a certain value. Debounce is the interval control of idle time. For example, if we do autocomplete, we need to control the call interval of the method when the input text is entered. Generally, the first input character is called immediately, and the execution method is repeatedly called at a certain interval. It is especially useful for abnormal input, for example, when you hold down a certain component.

Debounce's main application scenarios include:
Text input keydown event, keyup event, for example, autocomplete

There are many such online methods, such as Underscore. js, which 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. Then we provide a throttle and debounce control function that we have been using:
Copy codeThe Code is as follows:
/*
* Frequency Control: When a function is called consecutively, the fn execution frequency is limited to the time at which the function is executed.
* @ Param fn {function} refers to the function to be called.
* @ Param delay {number} delay time, in milliseconds
* @ Param immediate {bool}: Pass the value of false to the immediate parameter. The bound function is executed first, instead of after delay.
* @ Return {function} actually calls a 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 returns a function for consecutive calls, the idle time must be greater than or equal to delay before fn can be executed.
* @ Param fn {function} refers to the function to be called.
* @ Param delay {number} idle time
* @ Param immediate {bool}: Pass the value of false to the immediate parameter. The bound function is executed first, instead of after delay.
* @ Return {function} actually calls a function
*/

Var debounce = function (fn, delay, immediate ){
Return throttle (fn, delay, immediate, true );