引言

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

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

一、概念

• 函數(shù)節(jié)流( throttle )：高頻事件觸發(fā)，但在n秒內只會執(zhí)行一次，所以節(jié)流會稀釋函數(shù)的執(zhí)行頻率。
• 函數(shù)防抖( debounce )：觸發(fā)高頻事件后n秒內函數(shù)只會執(zhí)行一次，如果n秒內高頻事件再次被觸發(fā)，則重新計算時間。
• 函數(shù)節(jié)流（throttle）與函數(shù)防抖（debounce）都是為了限制函數(shù)的執(zhí)行頻次，以優(yōu)化函數(shù)觸發(fā)頻率過高導致的響應速度跟不上觸發(fā)頻率，出現(xiàn)延遲，假死或卡頓的現(xiàn)象。

二、實現(xiàn)

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

實現(xiàn)方式： 每次觸發(fā)事件時，如果當前有等待執(zhí)行的延時函數(shù)，則直接return。

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

• 函數(shù)防抖( debounce )

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

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

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

三、區(qū)別

節(jié)流函數(shù)不管事件觸發(fā)有多頻繁，都會保證在規(guī)定時間內一定會執(zhí)行一次真正的事件處理函數(shù)，而防抖函數(shù)只是在最后一次事件后才觸發(fā)一次函數(shù)。

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

四、Lodash

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

4-1.throttle

參數(shù)：

func (Function): 要節(jié)流的函數(shù)。

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

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

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

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

返回： (Function): 返回節(jié)流的函數(shù)。

例子：

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

4-2.debounce

參數(shù)：

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

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

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

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

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

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

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

例子：

// 避免窗口在變動時出現(xiàn)昂貴的計算開銷。
jQuery(window).on('resize', _.debounce(calculateLayout, 150));
// 當點擊時 `sendMail` 隨后就被調用。
jQuery(element).on('click', _.debounce(sendMail, 300, {
  'leading': true,
  'trailing': false
}));
// 確保 `batchLog` 調用1次之后，1秒內會被觸發(fā)。
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事件監(jiān)聽瀏覽器屏幕寬高，自適應適配操作
• scroll事件監(jiān)聽屏幕滾動，如：導航欄/Tab欄動態(tài)置頂、下拉刷新、上劃加載更多
• 表單的input事件查詢接口獲取數(shù)據(jù)
• tab切換頻率控制，防止頻繁點擊過快
• Echart圖表中tooltip.formatter方法

六、總結

1.節(jié)流：

使得一定時間內只觸發(fā)一次函數(shù)。原理是通過判斷是否有延遲調用函數(shù)未執(zhí)行。

2.防抖：

將多次操作合并為一次操作進行。原理是維護一個計時器，規(guī)定在delay時間后觸發(fā)函數(shù)，但是在delay時間內再次觸發(fā)的話，就會取消之前的計時器而重新設置。這樣一來，只有最后一次操作能被觸發(fā)。

以上就是JS中節(jié)流和防抖函數(shù)的實現(xiàn)及使用區(qū)別示例的詳細內容，更多關于JS節(jié)流防抖函數(shù)實現(xiàn)區(qū)別的資料請關注腳本之家其它相關文章！

最新評論