Analysis of throttle and debounce in JavaScript-basic knowledge

Throttle

What we are talking about here is the meaning of function throttling throttle. And the popular point is that the function calls the frequency controller, is the continuous execution time interval control. The main application of the scene such as:

1. Mouse movement, MouseMove events
2.DOM element dynamic Positioning, Window object resize and scroll events

Some people image of the incident as described above as a machine gun fire, throttle is the trigger of a machine gun, you do not pull the trigger, it has been shooting. The same is true of the events that we use when we develop, and the events are triggered when you do not release the mouse. For example:

Copy 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 similar, and the call method is executed when the debounce is free when the time must be greater than or equal to a certain value. Debounce is the interval control of idle time. For example, we do autocomplete, then we need to control the input text when the method time interval. In general, the first character entered immediately begins the call, repeating the method of execution based on a certain interval of time. It is especially useful for abnormal input, 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 plugin: jquery throttle/debounce, all of the principles of the same, the implementation of the same function. and a throttle and debounce control function that you've been using again:

Copy Code code as follows:

/*
* Frequency Control returns the function continuous call, the FN execution frequency is limited to each time executes once
* @param the function that the FN {function} needs to call
* @param delay {Number} delay time, per millisecond
* @param immediate {bool} The function to pass false binding to the immediate parameter executes first, not delay.
* @return {function} actually calling functions
*/
var throttle = function (Fn,delay, immediate, debounce) {
var Curr = +new Date (),//Current event
Last_call = 0,
last_exec = 0,
Timer = NULL,
diff,//Time lag
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 function Continuous call, the idle time must be greater than or equal to DELAY,FN before executing
* @param a function to be called by the FN {function}
* @param delay {Number} idle time
* @param immediate {bool} The function to pass false binding to the immediate parameter executes first, not delay.
* @return {function} actually calling functions
*/

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