throttle
我們這裡說的throttle就是函數節流的意思。再說的通俗一點就是函數調用的頻度控制器,是連續執行時間間隔控制。主要應用的場景比如:
1.鼠標移動,mousemove 事件
2.DOM 元素動態定位,window對象的resize和scroll 事件
有人形象的把上面說的事件形象的比喻成機關槍的掃射,throttle就是機關槍的扳機,你不放扳機,它就一直掃射。我們開發時用的上面這些事件也是一樣,你不松開鼠標,它的事件就一直觸發。例如:
復制代碼 代碼如下:
var resizeTimer=null;
$(window).on('resize',function(){
if(resizeTimer){
clearTimeout(resizeTimer)
}
resizeTimer=setTimeout(function(){
console.log("window resize");
},400);
debounce
debounce和throttle很像,debounce是空閒時間必須大於或等於 一定值的時候,才會執行調用方法。debounce是空閒時間的間隔控制。比如我們做autocomplete,這時需要我們很好的控制輸入文字時調用方法時間間隔。一般時第一個輸入的字符馬上開始調用,根據一定的時間間隔重復調用執行的方法。對於變態的輸入,比如按住某一個建不放的時候特別有用。
debounce主要應用的場景比如:
文本輸入keydown 事件,keyup 事件,例如做autocomplete
這類網上的方法有很多,比如Underscore.js就對throttle和debounce進行封裝。jQuery也有一個throttle和debounce的插件:jQuery throttle / debounce,所有的原理時一樣的,實現的也是同樣的功能。再奉上一個自己一直再用的throttle和debounce控制函數:
復制代碼 代碼如下:
/*
* 頻率控制 返回函數連續調用時,fn 執行頻率限定為每多少時間執行一次
* @param fn {function} 需要調用的函數
* @param delay {number} 延遲時間,單位毫秒
* @param immediate {bool} 給 immediate參數傳遞false 綁定的函數先執行,而不是delay後後執行。
* @return {function}實際調用函數
*/
var throttle = function (fn,delay, immediate, debounce) {
var curr = +new Date(),//當前事件
last_call = 0,
last_exec = 0,
timer = null,
diff, //時間差
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;
}
};
/*
* 空閒控制 返回函數連續調用時,空閒時間必須大於或等於 delay,fn 才會執行
* @param fn {function} 要調用的函數
* @param delay {number} 空閒時間
* @param immediate {bool} 給 immediate參數傳遞false 綁定的函數先執行,而不是delay後後執行。
* @return {function}實際調用函數
*/
var debounce = function (fn, delay, immediate) {
return throttle(fn, delay, immediate, true);