函數(shù)防抖Debounce和函數(shù)節(jié)流Throttle

NicolasHe 發(fā)布于2019-08-22 15:23 / 3517人閱讀

摘要：函數(shù)節(jié)流函數(shù)防抖函數(shù)節(jié)流和函數(shù)防抖函數(shù)節(jié)流和函數(shù)防抖二者很容易被混淆起來。函數(shù)防抖函數(shù)在特定的時間內(nèi)不被再調(diào)用后執(zhí)行。一句話概括函數(shù)節(jié)流是從用戶開始輸入就開始計時，而函數(shù)節(jié)流是從用戶停止輸入開始計時。

函數(shù)節(jié)流 & 函數(shù)防抖

函數(shù)節(jié)流和函數(shù)防抖

函數(shù)節(jié)流和函數(shù)防抖二者很容易被混淆起來。下面貼英文原文，建議認(rèn)真閱讀：
Debouncing enforces that a function not be called again until a certain amount of time has passed without it being called. As in "execute this function only if 100 milliseconds have passed without it being called".
Throttling enforces a maximum number of times a function can be called over time. As in "execute this function at most once every 100 milliseconds".

函數(shù)節(jié)流：確保函數(shù)特定的時間內(nèi)至多執(zhí)行一次。
函數(shù)防抖：函數(shù)在特定的時間內(nèi)不被再調(diào)用后執(zhí)行。

上面的概念可能還是不夠清晰，下面均以“輸入框輸入文字觸發(fā)ajax獲取數(shù)據(jù)”為例，分別以防抖和節(jié)流的思想來優(yōu)化，二者的區(qū)別：

輸入框輸入文字如下：1111111111111111111111（停頓3s繼續(xù)輸入）11111111111111111
函數(shù)防抖：當(dāng)用戶持續(xù)輸入1的過程中，并不會發(fā)送ajax，當(dāng)用戶停止輸入2s后，發(fā)送ajax請求，之后到第3s后，用戶繼續(xù)輸入1的過程中，依舊不會發(fā)送ajax，當(dāng)用戶停止輸入2s后，又觸發(fā)ajax請求。
函數(shù)節(jié)流：當(dāng)用戶持續(xù)輸入1的過程中（假設(shè)輸入1的過程超過2s了），從你開始輸入1開始計時，到第2s，發(fā)送ajax請求。函數(shù)節(jié)流與你是否停止輸入無關(guān)，是一種周期性執(zhí)行的策略。
一句話概括：函數(shù)節(jié)流是從用戶開始輸入就開始計時，而函數(shù)節(jié)流是從用戶停止輸入開始計時。

場景分析

函數(shù)節(jié)流（throttle）

頻繁的mousemove/keydown，比如高頻的鼠標(biāo)移動，游戲射擊類的

搜索聯(lián)想（keyup）

進度條（我們可能不需要高頻的更新進度）

拖拽的dragover等

高頻的點擊，抽獎等

無限滾動（用戶向下滾動無限滾動頁面，要檢查滾動位置距底部多遠(yuǎn)。如果離底部進了，發(fā)ajax請求獲取更多數(shù)據(jù)插入頁中）

函數(shù)防抖（debounce）

scroll/resize事件，瀏覽器改變大小，有人說是throttle

文本連續(xù)輸入，ajax驗證/關(guān)鍵字搜索

注：throttle和debounce均是通過減少實際邏輯處理過程的執(zhí)行來提高事件處理函數(shù)運行性能的手段，并沒有實質(zhì)上減少事件的觸發(fā)次數(shù)。

使用函數(shù)節(jié)流是進行前端性能優(yōu)化的方法之一，例如，懶加載的實現(xiàn)。

實現(xiàn)函數(shù)防抖和函數(shù)節(jié)流

函數(shù)防抖

function debounce(func,wait){
    var timeout;
    return function(){
        var context=this;//用來保存this的正確指向
        var args=arguments;//用來保存觸發(fā)的事件類型，例如keyboard event
        clearTimeout(timeout);//每次都重新開始計時
        timeout=setTimeout(function(){
            func.apply(context,args);
        },wait);
    }
}
a.onkeyup=debounce(getValue,3000);
function getValue(){
    console.log(this.value);//使用debounce調(diào)用它時，this就變?yōu)閣indow
}

函數(shù)節(jié)流

function throttle(func, wait) {
    var timeout, context, args, result;
    var previous = 0;
 
    var later = function() {
        previous = +new Date();
        timeout = null;
        func.apply(context, args)
    };

    var throttled = function() {
        var now = +new Date();
        //下次觸發(fā) func 剩余的時間
        var remaining = wait - (now - previous);
        context = this;
        args = arguments;
         // 如果沒有剩余的時間了或者你改了系統(tǒng)時間
        if (remaining <= 0 || remaining > wait) {
            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            func.apply(context, args);
        } else if (!timeout) {
            timeout = setTimeout(later, remaining);
        }
    };
    return throttled;
}