javascript中的throttle和debounce淺析

更新時間：2014年06月06日 09:22:18 作者：

這篇文章主要介紹了javascript中的throttle和debounce淺析,分別介紹了throttle和debounce的使用場景及具體案例,需要的朋友可以參考下

throttle

我們這里說的throttle就是函數(shù)節(jié)流的意思。再說的通俗一點就是函數(shù)調(diào)用的頻度控制器，是連續(xù)執(zhí)行時間間隔控制。主要應(yīng)用的場景比如：

1.鼠標(biāo)移動，mousemove 事件
2.DOM 元素動態(tài)定位，window對象的resize和scroll 事件

有人形象的把上面說的事件形象的比喻成機關(guān)槍的掃射，throttle就是機關(guān)槍的扳機，你不放扳機，它就一直掃射。我們開發(fā)時用的上面這些事件也是一樣，你不松開鼠標(biāo)，它的事件就一直觸發(fā)。例如：

復(fù)制代碼代碼如下:

var resizeTimer=null;
$(window).on('resize',function(){
       if(resizeTimer){
           clearTimeout(resizeTimer)
       }
       resizeTimer=setTimeout(function(){
           console.log("window resize");
       },400);

debounce

debounce和throttle很像，debounce是空閑時間必須大于或等于一定值的時候，才會執(zhí)行調(diào)用方法。debounce是空閑時間的間隔控制。比如我們做autocomplete，這時需要我們很好的控制輸入文字時調(diào)用方法時間間隔。一般時第一個輸入的字符馬上開始調(diào)用，根據(jù)一定的時間間隔重復(fù)調(diào)用執(zhí)行的方法。對于變態(tài)的輸入，比如按住某一個建不放的時候特別有用。

debounce主要應(yīng)用的場景比如：
文本輸入keydown 事件，keyup 事件，例如做autocomplete

這類網(wǎng)上的方法有很多，比如Underscore.js就對throttle和debounce進(jìn)行封裝。jQuery也有一個throttle和debounce的插件：jQuery throttle / debounce，所有的原理時一樣的，實現(xiàn)的也是同樣的功能。再奉上一個自己一直再用的throttle和debounce控制函數(shù)：

復(fù)制代碼代碼如下:

/*
* 頻率控制 返回函數(shù)連續(xù)調(diào)用時，fn 執(zhí)行頻率限定為每多少時間執(zhí)行一次
* @param fn {function}  需要調(diào)用的函數(shù)
* @param delay  {number}    延遲時間，單位毫秒
* @param immediate  {bool} 給 immediate參數(shù)傳遞false 綁定的函數(shù)先執(zhí)行，而不是delay后后執(zhí)行。
* @return {function}實際調(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, //時間差
       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)用時，空閑時間必須大于或等于 delay，fn 才會執(zhí)行
* @param fn {function}  要調(diào)用的函數(shù)
* @param delay   {number}    空閑時間
* @param immediate  {bool} 給 immediate參數(shù)傳遞false 綁定的函數(shù)先執(zhí)行，而不是delay后后執(zhí)行。
* @return {function}實際調(diào)用函數(shù)
*/

var debounce = function (fn, delay, immediate) {
   return throttle(fn, delay, immediate, true);