debouncing 與 throttling

zzir 發布于2019-08-20 19:09 / 2156人閱讀

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

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

Debouncing（防抖動） 概念

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

實現

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

funciton debouncing(fn, delay) {
    let timer; //定時器
    return function() { 
        // 保存函數調用時的上下文和參數，傳遞給 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（節流閥） 概念

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

實現

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

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

throttle使用方法如下：

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

總結

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

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

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

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

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

throttle函數與debounce函數

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

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

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

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

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

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

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

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

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

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