遇到的問題

在開發(fā)過程中會(huì)遇到頻率很高的事件或者連續(xù)的事件技掏，如果不進(jìn)行性能的優(yōu)化幔崖，就可能會(huì)出現(xiàn)頁面卡頓的現(xiàn)象滋迈，比如：

1. 鼠標(biāo)事件：mousemove(拖曳)/mouseover(劃過)/mouseWheel(滾屏)
2. 鍵盤事件：keypress(基于ajax的用戶名唯一性校驗(yàn))/keyup(文本輸入檢驗(yàn)罪郊、自動(dòng)完成)/keydown(游戲中的射擊)
3. window的resize/scroll事件(DOM元素動(dòng)態(tài)定位)

為了解決這類問題版确，常常使用的方法就是throttle(節(jié)流)和debounce(去抖)。throttle(節(jié)流)和debounce(去抖)都是用來控制某個(gè)函數(shù)在一定時(shí)間內(nèi)執(zhí)行多少次的解決方案乎折，兩者相似而又不同绒疗。

下面就具體的看看兩者的相似和區(qū)別。

認(rèn)識(shí)throttle和debounce

throttle和debounce的作用就是確認(rèn)事件執(zhí)行的方式和時(shí)機(jī)骂澄，以前總是不太清楚兩者的區(qū)別吓蘑，容易把二者弄混。

下面就通過兩個(gè)簡(jiǎn)單的場(chǎng)景描述一下debounce和throttle坟冲，以后想到這兩個(gè)場(chǎng)景就不會(huì)再弄混了：

debounce假設(shè)你正在乘電梯上樓磨镶，當(dāng)電梯門關(guān)閉之前發(fā)現(xiàn)有人也要乘電梯，禮貌起見健提，你會(huì)按下開門開關(guān)琳猫，然后等他進(jìn)電梯； 如果在電梯門關(guān)閉之前私痹，又有人來了脐嫂，你會(huì)繼續(xù)開門；這樣一直進(jìn)行下去紊遵，你可能需要等待幾分鐘账千，最終沒人進(jìn)電梯了，才會(huì)關(guān)閉電梯門暗膜，然后上樓匀奏。

所以debounce的作用是，當(dāng)調(diào)用動(dòng)作觸發(fā)一段時(shí)間后学搜，才會(huì)執(zhí)行該動(dòng)作娃善，若在這段時(shí)間間隔內(nèi)又調(diào)用此動(dòng)作則將重新計(jì)算時(shí)間間隔。

throttle假設(shè)你正在乘電梯上樓恒水，當(dāng)電梯門關(guān)閉之前發(fā)現(xiàn)有人也要乘電梯会放，禮貌起見饲齐，你會(huì)按下開門開關(guān)钉凌，然后等他進(jìn)電梯；  但是捂人，你是個(gè)沒耐心的人御雕，你最多只會(huì)等待電梯停留一分鐘；在這一分鐘內(nèi)滥搭，你會(huì)開門讓別人進(jìn)來酸纲，但是過了一分鐘之后，你就會(huì)關(guān)門瑟匆，讓電梯上樓闽坡。

所以throttle的作用是，預(yù)先設(shè)定一個(gè)執(zhí)行周期，當(dāng)調(diào)用動(dòng)作的時(shí)刻大于等于執(zhí)行周期則執(zhí)行該動(dòng)作疾嗅，然后進(jìn)入下一個(gè)新的時(shí)間周期外厂。

簡(jiǎn)單實(shí)現(xiàn)

有了上面的了解，就可以去實(shí)現(xiàn)簡(jiǎn)單debounce和throttle了代承。

debounce實(shí)現(xiàn)

首先來看看debounce的實(shí)現(xiàn)汁蝶，根據(jù)前面對(duì)debounce的描述：

1. debounce函數(shù)會(huì)通過閉包維護(hù)一個(gè)timer
2. 當(dāng)同一action在delay的時(shí)間間隔內(nèi)再次觸發(fā)，則清理timer论悴，然后重新設(shè)置timer

可以在Chrome中運(yùn)行下面的代碼掖棉，看看debounce的效果，代碼Github鏈接：

var debounce = function(action, delay) {
    var timer = null;

    return function() {
        var self = this, 
              args = arguments;

        clearTimeout(timer);
        timer = setTimeout(function() {
            action.apply(self, args)
        }, delay);
    }
}

// example
function resizeHandler() {
    console.log("resize");
}

window.onresize = debounce(resizeHandler, 300);

throttle實(shí)現(xiàn)

throttle跟debounce的最大不同就是膀估，throttle會(huì)有一個(gè)閥值幔亥，當(dāng)?shù)竭_(dá)閥值的時(shí)候action必定會(huì)執(zhí)行一次。

所以throttle的實(shí)現(xiàn)可以基于前面的debounce的實(shí)現(xiàn)察纯，只需要加上一個(gè)閥值紫谷，代碼Github鏈接：

var throttleV1 = function(action, delay, mustRunDelay) {
    var timer = null,
          startTime;

    return function() {
        var self = this, 
              args = arguments, 
              currTime = new Date();

        clearTimeout(timer);

        if(!startTime) {
            startTime = currTime;
        }

        if(currTime - startTime >= mustRunDelay) {
            action.apply(self, args);
            startTime = currTime;
        }
        else {
            timer = setTimeout(function() {
                action.apply(self, args);
            }, delay);
        }
    };
};

其實(shí)，對(duì)于上面的實(shí)現(xiàn)可以進(jìn)心簡(jiǎn)化捐寥，只是通過閉包維護(hù)一個(gè)開始的時(shí)間：

var throttleV2 = function(action, delay){
    var statTime = 0;

    return function() {
        var currTime = +new Date();

        if (currTime - statTime > delay) {
            action.apply(this, arguments);
            statTime = currTime ;
        }
    }
}    

// example
function resizeHandler() {
    console.log("resize");
}

window.onresize = throttleV2(resizeHandler, 300);

總結(jié)

通過前面的介紹笤昨，應(yīng)該對(duì)debounce和throttle有一個(gè)直觀的認(rèn)識(shí)了：

• debounce：把觸發(fā)非常頻繁的事件合并成一次執(zhí)行
• throttle：設(shè)置一個(gè)閥值，在閥值內(nèi)握恳，把觸發(fā)的事件合并成一次執(zhí)行瞒窒；當(dāng)?shù)竭_(dá)閥值，必定執(zhí)行一次事件

了解了throttle和debounce之后乡洼，下面看看他們的常用場(chǎng)景：

debounce

• 對(duì)于鍵盤事件崇裁，當(dāng)用戶輸入比較頻繁的時(shí)候，可以通過debounce合并鍵盤事件處理
• 對(duì)于ajax請(qǐng)求的情況束昵，例如當(dāng)頁面下拉超過一定返回就通過ajax請(qǐng)求新的頁面內(nèi)容拔稳，這時(shí)候可以通過debounce合并ajax請(qǐng)求事件

throttle

• 對(duì)于鍵盤事件，當(dāng)用戶輸入非常頻繁锹雏，但是我們又必須要在一定時(shí)間內(nèi)（閥值）內(nèi)執(zhí)行處理函數(shù)的時(shí)候巴比，就可以使用throttle

  • 例如，一些網(wǎng)頁游戲的鍵盤事件

• 對(duì)于鼠標(biāo)移動(dòng)和窗口滾動(dòng)礁遵，鼠標(biāo)的移動(dòng)和窗口的滾動(dòng)會(huì)帶來大量的事件轻绞，但是在一段時(shí)間內(nèi)又必須看到頁面的效果

  • 例如對(duì)于可以拖動(dòng)的div，如果使用debounce佣耐，那么div會(huì)在拖動(dòng)停止后一下子跳到目標(biāo)位置政勃；這時(shí)就需要使用throttle
    作者：田小計(jì)劃

出處：http://www.cnblogs.com/wilber2013/