The throttle control function executes at a specific frequency
Debounce control functions are executed at a specific time interval
Usage Scenarios
Throttle
1. MouseMove event when dragging
2. Mousedown,keydown event in shooting game
3.window Scroll when updating styles, such as the follow-up effect
Simple implementation
var throttle = function (delay, action) {
var last = 0;
return function () {
var Curr = +new Date ();
if (Curr-last > Delay) {
Action.apply (this, arguments);
last = Curr;
}
};
};
Debounce
1. Automatic completion of text input (KeyUp), real-time verification
2. Resize the window to recalculate the style or layout
Simple implementation
var debounce = function (idle, action) {
var last;
return function () {
var ctx = this, args = arguments;
Cleartimeout (last);
last = SetTimeout (function () {
Action.apply (CTX, args);
}, idle);
};
};
Implementation of Throttle and debounce
Related JS library underscore.js,lodash.js,jquery-throttle-debounce.js and so on have its realization.
Reference: http://www.cnblogs.com/fsjohnhuang/p/4147810.html
function throttling (throttle) and function jitter (debounce)