JS中節流和防抖怎么實現

本篇內容主要講解“JS中節流和防抖怎么實現”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“JS中節流和防抖怎么實現”吧!

引言

在前端開發中，經常和DOM、BOM打交道，例如：窗口的resize、scroll，輸入框內容校驗，按鈕點擊等等操作時，如果事件處理函數調用的頻率無限制，會加重瀏覽器的負擔，導致用戶體驗非常糟糕。

此時我們可以采用throttle（節流）和debounce（防抖）的方式來減少調用頻率，提高性能的同時又不影響實際效果。

一、概念

• 函數節流( throttle )：高頻事件觸發，但在n秒內只會執行一次，所以節流會稀釋函數的執行頻率。

• 函數防抖( debounce )：觸發高頻事件后n秒內函數只會執行一次，如果n秒內高頻事件再次被觸發，則重新計算時間。

• 函數節流（throttle）與函數防抖（debounce）都是為了限制函數的執行頻次，以優化函數觸發頻率過高導致的響應速度跟不上觸發頻率，出現延遲，假死或卡頓的現象。

二、實現

• 函數節流( throttle )

實現方式： 每次觸發事件時，如果當前有等待執行的延時函數，則直接return。

// 節流 throttle 代碼
function throttle(fn,delay) {
    let canRun = true; // 通過閉包保存一個標記
    return function () {
         // 在函數開頭判斷標記是否為true，不為true則return
        if (!canRun) return;
         // 立即設置為false
        canRun = false;
        // 將外部傳入的函數的執行放在setTimeout中
        setTimeout(() => { 
        // 最后在setTimeout執行完畢后再把標記設置為true(關鍵)表示可以執行下一次循環了。
        // 當定時器沒有執行的時候標記永遠是false，在開頭被return掉
            fn.apply(this, arguments);
            canRun = true;
        }, delay);
    };
}
function log(e) {
    console.log('節流：', e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(log,500));

• 函數防抖( debounce )

實現方式： 每次觸發事件時設置一個延遲調用方法，并且取消之前的延時調用方法。

缺點： 如果事件在規定的時間間隔內被不斷的觸發，則調用方法會被不斷的延遲。

// 防抖 debounce 代碼
function debounce(fn,delay) {
    var timeout = null; // 創建一個標記用來存放定時器的返回值
    return function (e) {
        // 每當用戶輸入的時候把前一個 setTimeout clear 掉
        clearTimeout(timeout); 
        // 然后又創建一個新的 setTimeout, 這樣就能保證interval 間隔內如果時間持續觸發，就不會執行 fn 函數
        timeout = setTimeout(() => {
            fn.apply(this, arguments);
        }, delay);
    };
}
// 處理函數
function run() {
    console.log('防抖：', Math.random());
}
//滾動事件
window.addEventListener('scroll', debounce(run, 500));

三、區別

節流函數不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函數，而防抖函數只是在最后一次事件后才觸發一次函數。

比如在頁面的無限加載場景下，我們需要用戶在滾動頁面時，每隔一段時間發一次 Ajax 請求，而不是在用戶停下滾動頁面操作時才去請求數據。這樣的場景，就適合用節流技術來實現。

四、Lodash

Lodash 是一個一致性、模塊化、高性能的 JavaScript 實用工具庫。其中就封裝好了節流函數 throttle 和防抖函數 debounce。

4-1.throttle

參數：

func (Function): 要節流的函數。

[wait=0] (number): 需要節流的毫秒。

[options=] (Object): 選項對象。

[options.leading=true] (boolean): 指定調用在節流開始前。

[options.trailing=true] (boolean): 指定調用在節流結束后。

返回： (Function): 返回節流的函數。

例子：

// 避免在滾動時過分的更新定位
jQuery(window).on('scroll', _.throttle(updatePosition, 100));
// 點擊后就調用 `renewToken`，但5分鐘內超過1次。
var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
jQuery(element).on('click', throttled);
// 取消一個 trailing 的節流調用。
jQuery(window).on('popstate', throttled.cancel);

4-2.debounce

參數：

func (Function): 要防抖動的函數。

[wait=0] (number): 需要延遲的毫秒數。

[options=] (Object): 選項對象。

[options.leading=false] (boolean): 指定在延遲開始前調用。

[options.maxWait] (number): 設置 func 允許被延遲的最大值。

[options.trailing=true] (boolean): 指定在延遲結束后調用。

返回： (Function): 返回新的 debounced（防抖動）函數。

例子：

// 避免窗口在變動時出現昂貴的計算開銷。
jQuery(window).on('resize', _.debounce(calculateLayout, 150));
// 當點擊時 `sendMail` 隨后就被調用。
jQuery(element).on('click', _.debounce(sendMail, 300, {
  'leading': true,
  'trailing': false
}));
// 確保 `batchLog` 調用1次之后，1秒內會被觸發。
var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
var source = new EventSource('/stream');
jQuery(source).on('message', debounced);
// 取消一個 trailing 的防抖動調用
jQuery(window).on('popstate', debounced.cancel);

五、使用場景

• resize事件監聽瀏覽器屏幕寬高，自適應適配操作

• scroll事件監聽屏幕滾動，如：導航欄/Tab欄動態置頂、下拉刷新、上劃加載更多

• 表單的input事件查詢接口獲取數據

• tab切換頻率控制，防止頻繁點擊過快

• Echart圖表中tooltip.formatter方法

到此，相信大家對“JS中節流和防抖怎么實現”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！