Throttle and debounce in JavaScript

Throttle

The throttle we're talking about here is the meaning of function throttling. Another popular point is the frequency controller of the function call, which is the continuous execution time interval control. The main application scenarios are as follows:

1. Mouse movement, MouseMove event
Dynamic positioning of 2.DOM elements, resize and scroll events for window objects

Some image of the image of the event described above as a machine gun fire, throttle is the trigger of machine guns, you do not put the trigger, it has been shooting. The same is true for all of the above events that are used in our development, and if you do not release the mouse, its events will always be triggered. For example:

Copy the code code as follows:

var resizetimer=null;
$ (window). On (' Resize ', function () {
if (Resizetimer) {
Cleartimeout (Resizetimer)
}
Resizetimer=settimeout (function () {
Console.log ("Window resize");
},400);

Debounce

Debounce and throttle are like, debounce is the time when idle time must be greater than or equal to a certain value before the calling method is executed. Debounce is the interval control for idle time. For example, we do autocomplete, we need to control the input text when we call the method time interval. In general, the first input character is called immediately, and the execution method is repeated at certain intervals. It is especially useful for perverted inputs, such as holding down a certain build.

Debounce main application scenarios such as:
Text input KeyDown events, KeyUp events, such as doing AutoComplete

There are many ways to do this online, such as underscore.js to encapsulate throttle and debounce. jquery also has a throttle and debounce plug-in: jquery throttle/debounce, all the same principle, the same function is realized. And then a throttle and debounce control function that you've been using for a while:

Copy the code code as follows:

/*
* Frequency control when the function is called continuously, the FN execution frequency is limited to the number of times per execution
* @param the function that fn {function} needs to be called
* Delay time for @param delay {number}, per millisecond
* @param immediate {bool} The function that passes the false binding to the immediate parameter executes first, not after delay.
* @return {function} is actually called
*/
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;
}
};

/*
* Idle control returns when the function is called continuously, idle time must be greater than or equal to DELAY,FN to execute
* @param the function to be called by fn {function}
* @param delay {Number} idle time
* @param immediate {bool} The function that passes the false binding to the immediate parameter executes first, not after delay.
* @return {function} is actually called
*/

var debounce = function (FN, delay, immediate) {
Return throttle (FN, delay, immediate, true);

Throttle and debounce in JavaScript