JavaScript 防抖debounce與節流thorttle

Posted on by

前言：

防抖（Debounce） 和 節流（Throttle） 技術用於限制函數執行的次數。通常，一個函數將被執行多少次或何時執行由開發人員決定。但在某些情況下，開發人員會將這種能力賦予用戶，由用戶決定執行該功能的時間和次數。

例如，添加到click、scroll、resize等事件上的函數，允許用戶決定何時執行它們以及執行多少次。有時，用戶可能會比所需更頻繁地執行這些操作。這可能不利於網站的性能，特別是如果附加到這些事件的函數執行一些繁重的計算。在這種情況下，用戶可以控制函數的執行，開發人員必須設計一些技術來限制用戶可以執行函數的次數。

舉個例子，假設我們為滾動事件scroll添加瞭一個函數，該函數中會執行修改DOM元素的操作。我們知道，修改DOM元素大小開銷很大，會引起瀏覽器的回流（Reflow）和重排（Repaint），以及重新渲染整個或部分頁面。如果用戶頻繁滾動，導致該函數頻繁被調用，可能會影響網頁性能或導致頁面卡頓等。
此外，有些事件回調函數中包含ajax等異步操作的時候，多次觸發會導致返回的內容結果順序不一致，而導致得到的結果非最後一次觸發事件對應的結果

所以，為瞭優化網頁的性能，控制函數被調用的頻率是很有必要的，防抖（Debounce） 和 節流（Throttle） 是通過控制函數被調用的頻率來優化腳本性能的兩種方法

一、防抖（Debounce）

防抖：無論用戶觸發多少次事件，對應的回調函數隻會在事件停止觸發指定事件後執行。（即：回調函數在事件停止觸發指定時間後被調用）

例如，假設用戶在 100 毫秒內點擊瞭 5 次按鈕。防抖技術不會讓這些點擊中的任何一個執行對應的回調函數。一旦用戶停止點擊，如果去抖時間為 100 毫秒，則回調函數將在 100 毫秒後執行。因此，肉眼看來，防抖就像將多個事件組合成一個事件一樣。

1.1 防抖函數的實現

（1）版本1 —— 停止觸發事件n毫秒後執行回調函數

觸發事件後函數不會立即執行，而是在停止事件觸發後 n 毫秒後執行，如果在 n 毫秒內又觸發瞭事件，則會重新計時

/**
* @desc 函數防抖
* @param func 回調函數
* @param delay 延遲執行毫秒數
*/
function debounce(func, delay) {
    let timer;  // 定時器

    return function () { 
        let context = this;  // 記錄 this 值,防止在回調函數中丟失
        let args = arguments;  // 函數參數

        //如果定時器存在，則清除定時器(如果沒有,也沒必要進行處理)
        timer ? clearTimeout(timer) : null; 

        timer = setTimeout(() => { 
            // 防止 this 值變為 window
            func.apply(context, args) 
        }, delay);
    }
}

（2）版本2

觸發事件後立即執行回調函數，但是觸發後n毫秒內不會再執行回調函數，如果 n 毫秒內觸發瞭事件，也會重新計時。

 /**
* @desc 函數防抖
* @param func 回調函數
* @param delay 延遲執行毫秒數
*/ 
function _debounce(func, delay) {
    let timer;  // 定時器

    return function () {
        let context = this;  // 記錄 this 值,防止在回調函數中丟失
        let args = arguments;  // 函數參數

        // 標識是否立即執行
        let isImmediately = !timer;

        //如果定時器存在，則清除定時器(如果沒有,也沒必要進行處理)
        timer ? clearTimeout(timer) : null;

        timer = setTimeout(() => {
            timer = null;
        }, delay);

        // isImmediately 為 true 則 執行函數(即首次觸發事件)
        isImmediately ? func.apply(context, args) : null;
    }
}

舉個例子來對比一下兩個版本的區別：

document.body.onclick= debounce(function () { console.log('hello') },1000)

如上代碼中，我們給body添加瞭一個點擊事件監聽器。

  • 如果是版本1的防抖函數，當我點擊body時，控制臺不會立即打印hello,要等 1000ms 後才會打印。在這 1000s 內如果還點擊瞭 body，那麼就會重新計時。即最後一次點擊 body 過1000ms後控制臺才會打印hello
  • 如果是版本2的防抖函數，當我首次點擊body時，控制臺會立馬打印 hello，但是在此之後的 1000ms 內點擊 body ，控制臺不會有任何反應。在這 1000s 內如果還點擊瞭 body，那麼就會重新計時。必須等計時結束後再點擊body，控制臺才會再次打印 hello。

1.2 防抖的實際應用

（1）搜索框建議項

通常，搜索框會提供下拉菜單，為用戶當前的輸入提供自動完成選項。但有時建議項是通過請求後端得到的。可以在實現提示文本時應用防抖，在等待用戶停止輸入一段時間後再顯示建議文本。因此，在每次擊鍵時，都會等待幾秒鐘，然後再給出建議。

（2）消除resize事件處理程序的抖動。

window 觸發 resize 的時候，不斷的調整瀏覽器窗口大小會不斷觸發這個事件，用防抖讓其隻觸發一次

（3）自動保存

例如掘金一類的網站，都會內嵌文本編輯器，在編輯過程中會自動保存文本，防止數據丟失。每次保存都會與後端進行數據交互，所以可以應用防抖，在用戶停止輸入後一段時間內再自動保存。

（4）手機號、郵箱等輸入驗證檢測

通常對於一些特殊格式的輸入項，我們通常會檢查格式。我們可以應用防抖在用戶停止輸入後一段時間再進行格式檢測，而不是輸入框中內容發生改變就檢測。

（5）在用戶停止輸入之前不要發出任何 Ajax 請求

二、節流（Throttle）

節流：無論用戶觸發事件多少次，附加的函數在給定的時間間隔內隻會執行一次。（即：回調函數在規定時間內最多執行一次）

 例如，當用戶單擊一個按鈕時，會執行一個在控制臺上打印Hello, world的函數。現在，假設對這個函數應用 1000 毫秒的限制時，無論用戶點擊按鈕多少次，Hello, world在 1000 毫秒內都隻會打印一次。節流可確保函數定期執行。

2.1 節流函數的實現

（1）版本1 —— 使用定時器

 /**
* @desc 函數節流
* @param func 回調函數 
* @param limit 時間限制
*/
const throttle = (func, limit) => {
    let inThrottle;  // 是否處於節流限制時間內

    return function() {
        const context = this;
        const args = arguments;

        // 跳出時間限制
        if (!inThrottle) {
            func.apply(context, args);  // 執行回調
            inThrottle = true;  
            // 開啟定時器計時
            setTimeout(() => inThrottle = false, limit);
        }
    }
}

（2）版本2 —— 計算當前時間與上次執行函數時間的間隔

 /**
* @desc 函數節流
* @param func 回調函數
* @param limit 時間限制
*/ 
function throttle(func, limit) {
    //上次執行時間
    let previous = 0;
    return function() {
        //當前時間
        let now = Date.now();

        let context = this;
        let args = arguments;

        // 若當前時間-上次執行時間大於時間限制
        if (now - previous > limit) {
            func.apply(context, args);
            previous = now;
        }
    }
}

很多現有的庫中已經實現瞭防抖函數和節流函數

2.2 節流的實際應用

（1）遊戲中通過按下按鈕執行的關鍵動作（例如：射擊、平A）

拿王者榮耀為例，通常都有攻速一說。如果攻速低，即使 n 毫秒內點擊平A按鈕多次，也隻會執行一次平A。其實這裡就類似於節流的思想，可以通過設置節流的時間間隔限制，來改變攻速。

（2）滾動事件處理

如果滾動事件被觸發得太頻繁，可能會影響性能，因為它包含大量視頻和圖像。因此滾動事件必須使用節流

（3）限制mousemove/touchmove事件處理程序

小結

如何選擇防抖和節流：

關於防抖函數和節流函數的選擇，一篇博客中是這樣建議的：

A debounce is utilized when you only care about the final state. A throttle is best used when you want to handle all intermediate states but at a controlled rate.

即：如果隻關心最終狀態，建議使用防抖。如果是想要函數以可控的速率執行，那麼建議使用節流。

延時多久合理：

  • 大多數屏幕的刷新頻率是每秒60Hz，瀏覽器的渲染頁面的標準幀率也為60FPS，瀏覽器每秒會重繪60次，而每幀之間的時間間隔是DOM視圖更新的最小間隔。
  • 一個平滑而流暢的動畫，最佳的循環間隔即幀與幀的切換時間希望是 16.6ms(1s/60)內,也意味著17ms內的多次DOM改動會被合並為一次渲染。
  • 當執行回調函數時間大於16.6ms（系統屏幕限制的刷新頻率），UI將會出現丟幀(即UI這一刻不會被渲染)，且丟幀越多，引起卡頓情況更嚴重。

到此這篇關於JavaScript 防抖debounce與節流thorttle的文章就介紹到這瞭,更多相關JavaScript 防抖與節流內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：