debouncing 與 throttling

zzir 發(fā)布于2019-08-20 19:09 / 2199人閱讀

摘要：一個使用場景某些瀏覽器事件可能會在短時間內高頻觸發(fā)，比如整窗口大小或滾動頁面。這會導致非常嚴重的性能問題。實現(xiàn)與類似，接收兩個參數(shù)，一個是需要截流的函數(shù)，另一個是函數(shù)執(zhí)行間隔閾值。

一個使用場景：
某些瀏覽器事件可能會在短時間內高頻觸發(fā)，比如：整窗口大小或滾動頁面。
如果給窗口滾動事件添加一個事件監(jiān)聽器，然后用戶不停地快速滾動頁面，那你的事件可能在短短數(shù)秒之內被觸發(fā)數(shù)千次。這會導致非常嚴重的性能問題。
所以如果功能涉及滾動事件，窗口調整事件，或者鍵盤事件鼠標事件等，你可能需要警覺起來，是否有必要使用 debouncing 或者 throttling 來提高頁面速度與性能。

Debouncing（防抖動） 概念

debouncing（防抖動）是解決上述問題的一個方案，它的做法是限制下次函數(shù)調用之前必須等待的時間間隔，也就是說：強制一個函數(shù)在某個連續(xù)時間段內只執(zhí)行一次，哪怕它本來會被調用多次。正確實現(xiàn) debouncing 的方法是：將若干個函數(shù)調用合并為一次，只有在空閑時間大于或等于給定值的時候，才執(zhí)行調用方法。

實現(xiàn)

簡單的實現(xiàn)一個 debounce 方法，接收兩個參數(shù)，一個是需要防抖動的函數(shù) fn,另一個是延遲時間delay

funciton debouncing(fn, delay) {
    let timer; //定時器
    return function() { 
        // 保存函數(shù)調用時的上下文和參數(shù)，傳遞給 fn
        const context = this;
        const args = arguments;
        
        clearTimeout(timer);
        
        timer = setTimeout(function(){
            fn.apply(context, args);
        }, delay);
    }
}

該 debounce 的使用方法如下：

$(document).on("keyup", debounce(function(e) {
    // 代碼
}, 250))

Throttling（節(jié)流閥） 概念

throttling（節(jié)流閥）則是另一種解決問題的方案，它的做法是固定一段時間內函數(shù)調用的頻率，它與 debouncing 最大的不同之處在于，throttling 會保證至少調用一次。

實現(xiàn)

與 debounce 類似，接收兩個參數(shù)，一個是需要截流的函數(shù) fn，另一個是函數(shù)執(zhí)行間隔閾值 threshhold。

function throttle(fn, threshhold) {
    let timer; //定時器
    let last; //記錄上次時間
    threshhold || (threshhold = 250); //默認間隔為250ms    
    return function() {
        // 保存函數(shù)調用時的上下文和參數(shù)，傳遞給 fn
        var context = this;
        var args = arguments;
        
        let now = +new Date();
        
        // 如果上次調用距本次調用的時間間隔不夠，則不執(zhí)行 fn，并重新計時
        if(last && now < last + threshhold){
            clearTimeout(timer);
            
            // 保證在當前時間區(qū)間結束后，再執(zhí)行一次 fn
            timer = setTimeout({
                last = now;
                fn.apply(context, args);
            }, threshhold);                
        } else {  //如果時間間隔夠了，則立刻執(zhí)行 fn
            last = now;
            fn.apply(context, args);
        }   
}

throttle使用方法如下：

$(document).on("mouvemove", throttle(function(e) {
    // 代碼
}, 250))

總結

debouncing 和 throttling 的區(qū)別還是很明顯的：前者把一段時間的多次調用合并成一次，后者把一段時間的多次調用減少為數(shù)次。下圖的展示十分便于理解。

相關文章：
實例解析防抖動（Debouncing）和節(jié)流閥（Throttling)

云服務器 GPU云服務器 Debouncing Throttling throttle debounce

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.hztianpu.com/yun/85231.html

throttle函數(shù)與debounce函數(shù)

摘要：當函數(shù)被再次觸發(fā)時，清除已設置的定時器，重新設置定時器。函數(shù)設置定時器，并根據(jù)傳參配置決定是否在等待開始時執(zhí)行函數(shù)。函數(shù)取消定時器，并重置內部參數(shù)。 throttle函數(shù)與debounce函數(shù) 有時候，我們會對一些觸發(fā)頻率較高的事件進行監(jiān)聽，如果在回調里執(zhí)行高性能消耗的操作，反復觸發(fā)時會使得性能消耗提高，瀏覽器卡頓，用戶使用體驗差?；蛘呶覀冃枰獙τ|發(fā)的事件延遲執(zhí)行回調，此時可以借助th...

Prasanta 2019-08-26 12:18 評論0 收藏0
JS throttle與debounce的區(qū)別

摘要：可以看下面的栗子這個圖中圖中每個小格大約，右邊有原生事件與節(jié)流去抖插件的與事件。即如果有連續(xù)不斷的觸發(fā)，每執(zhí)行一次，用在每隔一定間隔執(zhí)行回調的場景。執(zhí)行啦打印執(zhí)行啦打印執(zhí)行啦節(jié)流按照上面的說明，節(jié)流就是連續(xù)多次內的操作按照指定的間隔來執(zhí)行。一般在項目中我們會對input、scroll、resize等事件進行節(jié)流控制，防止事件過多觸發(fā)，減少資源消耗；在vue的官網(wǎng)的例子中就有關于lod...

wawor4827 2019-08-22 16:11 評論0 收藏0
淺談throttle以及debounce的原理和實現(xiàn)

摘要：淺談以及的原理和實現(xiàn)背景日常開發(fā)中我們經(jīng)常會遇到一些需要節(jié)流調用或者壓縮調用次數(shù)的情況例如之前我在完成一個需求的時候就遇到了因為后端并發(fā)問題導致收到多條信息從而導致函數(shù)被重復調用的情況當時的做法是通過對函數(shù)的調用進行注冊遇到多次調用的時候清淺談throttle以及debounce的原理和實現(xiàn) 背景日常開發(fā)中,我們經(jīng)常會遇到一些需要節(jié)流調用,或者壓縮調用次數(shù)的情況,例如之前我在完成...

jsbintask 2019-08-20 19:08 評論0 收藏0
throttle與debounce的區(qū)別

摘要：自己嘗試一下年在的文章中第一次看到的實現(xiàn)方法。這三種實現(xiàn)方法內部不同，但是接口幾乎一致。如你所見，我們使用了參數(shù)，因為我們只對用戶停止改變?yōu)g覽器大小時最后一次事件感興趣。前幾天看到一篇文章，我的公眾號里也分享了《一次發(fā)現(xiàn)underscore源碼bug的經(jīng)歷以及對學術界拿來主義的思考》具體文章詳見，微信公眾號：showImg(https://segmentfault.com/img/b...

Pluser 2019-08-19 18:04 評論0 收藏0
[譯]通過實例講解Debouncing和Throtting(防抖與節(jié)流)

摘要：譯通過實例講解和防抖與節(jié)流源碼中推薦的文章，為了學習英語，翻譯了一下原文鏈接作者本文來自一位倫敦前端工程師的技術投稿。首次或立即你可能發(fā)現(xiàn)防抖事件在等待觸發(fā)事件執(zhí)行，直到事件都結束后它才執(zhí)行。 [譯]通過實例講解Debouncing和Throtting(防抖與節(jié)流) lodash源碼中推薦的文章，為了學習（英語），翻譯了一下~ 原文鏈接作者：DAVID CORBACHO 本文來自一位...

Jenny_Tong 2019-08-23 13:42 評論0 收藏0