debounce(防抖)和throttle(節(jié)流)

2bdenny 發(fā)布于2019-08-19 18:46 / 943人閱讀

摘要：防抖防抖，簡單來說就是防止抖動。兩者間的核心區(qū)別就在于持續(xù)觸發(fā)事件時，前者合并事件并在最后時間去觸發(fā)事件，而后者則是隔間時間觸發(fā)一次關(guān)鍵知識點(diǎn)定時器閉包資源在線測試源代碼

防抖和節(jié)流

窗口的resize、scroll，輸入框內(nèi)容校驗(yàn)等操作時，如果這些操作處理函數(shù)較為復(fù)雜或頁面頻繁重渲染等操作時，如果事件觸發(fā)的頻率無限制，會加重瀏覽器的負(fù)擔(dān)，導(dǎo)致用戶體驗(yàn)非常糟糕。此時我們可以采用debounce（防抖）和throttle（節(jié)流）的方式來減少觸發(fā)的頻率，同時又不影響實(shí)際效果。

debounce 防抖

debounce（防抖），簡單來說就是防止抖動。

從上圖中我們可以看到，當(dāng)持續(xù)觸發(fā)事件時，debounce會合并事件且不會去觸發(fā)事件，當(dāng)一定時間內(nèi)沒有觸發(fā)再這個事件時，才真正去觸發(fā)事件～一起來實(shí)現(xiàn)個簡單的debounce：

function debounce(fn, delay) {
  var ctx;
  var args;
  var timer = null;

  var later = function () {
    fn.apply(ctx, args);
    // 當(dāng)事件真正執(zhí)行后，清空定時器
    timer = null;
  };

  return function () {
    ctx = this;
    args = arguments;
    // 當(dāng)持續(xù)觸發(fā)事件時，若發(fā)現(xiàn)事件觸發(fā)的定時器已設(shè)置時，則清除之前的定時器
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }

    // 重新設(shè)置事件觸發(fā)的定時器
    timer = setTimeout(later, delay);
  };
}

效果圖:

throttle 節(jié)流

throttle（節(jié)流），當(dāng)持續(xù)觸發(fā)事件時，保證隔間時間觸發(fā)一次事件。

上圖中綠色塊表示觸發(fā)一次事件，持續(xù)觸發(fā)事件時，throttle會合并一定時間內(nèi)的事件，并在該時間結(jié)束時真正去觸發(fā)一次事件～一起來看看throttle的簡單實(shí)現(xiàn)：

function throttle(fn, delay) {
  var ctx;
  var args;
  // 記錄上次觸發(fā)事件
  var previous = Date.now();

  var later = function () {
    fn.apply(ctx, args);
  };

  return function () {
    ctx = this;
    args = arguments;
    var now = Date.now();
    // 本次事件觸發(fā)與上一次的時間比較
    var diff = now - previous - delay;

    // 如果隔間時間超過設(shè)定時間，即再次設(shè)置事件觸發(fā)的定時器
    if (diff >= 0) {
      // 更新最近事件觸發(fā)的時間
      previous = now;
      setTimeout(later, delay);
    }
  };
}

效果圖:

總結(jié)

根據(jù)實(shí)際業(yè)務(wù)場景，合理的利用debounce（防抖）和throttle（節(jié)流）可以優(yōu)化性能和提高用戶體驗(yàn)。兩者間的核心區(qū)別就在于持續(xù)觸發(fā)事件時，前者合并事件并在最后時間去觸發(fā)事件，而后者則是隔間時間觸發(fā)一次～

關(guān)鍵知識點(diǎn)

setTimeout 定時器

w3school

Closure 閉包

ruanyifeng

資源 在線測試 源代碼