快捷導(dǎo)航

javascript中的throttle和debounce淺析

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

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

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ā)。例如：

復(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ù)：

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

/*
* 頻率控制 返回函數(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);