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