JS - debounce(去抖) 和 throttle(節(jié)流)

Mike617 發(fā)布于2019-08-23 18:36 / 3086人閱讀

摘要：多次連續(xù)事件觸發(fā)動作最后一次觸發(fā)之后的指定時間間隔執(zhí)行回調(diào)函數(shù)預(yù)先設(shè)定一個執(zhí)行周期，當(dāng)調(diào)用動作的時刻大于等于執(zhí)行周期則執(zhí)行該動作，然后進(jìn)入下一個新的時間周期。

定義

為了避免某個事件在較短的時間段內(nèi)（稱為 T）內(nèi)連續(xù)觸發(fā)從而引起的其對應(yīng)的事件處理函數(shù)不必要的連續(xù)執(zhí)行的一種事件處理機(jī)制（高頻觸發(fā)事件解決方案）
debounce：當(dāng)調(diào)用動作觸發(fā)一段時間后，才會執(zhí)行該動作，若在這段時間間隔內(nèi)又調(diào)用此動作則將重新計算時間間隔。（多次連續(xù)事件觸發(fā)動作/最后一次觸發(fā)之后的指定時間間隔執(zhí)行回調(diào)函數(shù)）
throttle：預(yù)先設(shè)定一個執(zhí)行周期，當(dāng)調(diào)用動作的時刻大于等于執(zhí)行周期則執(zhí)行該動作，然后進(jìn)入下一個新的時間周期。（每個指定時間執(zhí)行一次回調(diào)函數(shù)，可以指定時間間隔之前調(diào)用）

區(qū)別

1、throttle 保證了在每個 T 內(nèi)至少執(zhí)行一次，而 debounce 沒有這樣的保證
2、每次事件觸發(fā)時參考的時間點，對于debounce來是上一次事件觸發(fā)的時間并且在延時沒有結(jié)束時會重置延時；
throttle 是上一次 handler 執(zhí)行的時間并且在延時尚未結(jié)束時不會重置延時

影響

響應(yīng)速度跟不上觸發(fā)頻率，往往會出現(xiàn)延遲，導(dǎo)致假死或者卡頓感

實現(xiàn) 去抖 debounce

空閑控制：所有操作最后一次性執(zhí)行

【簡潔版】

/**
* @param fn {Function}   實際要執(zhí)行的函數(shù)
* @param delay {Number}  延遲時間，也就是閾值，單位是毫秒（ms）
* @return {Function}     返回一個“去彈跳”了的函數(shù)
*/
function debounce(fn, delay) {
  // 定時器，用來 setTimeout
  var timer

  // 返回一個函數(shù)，這個函數(shù)會在一個時間區(qū)間結(jié)束后的 delay 毫秒時執(zhí)行 fn 函數(shù)
  return function () {
    // 保存函數(shù)調(diào)用時的上下文和參數(shù)，傳遞給 fn
    var context = this
    var args = arguments

    // 每次這個返回的函數(shù)被調(diào)用，就清除定時器，以保證不執(zhí)行 fn
    clearTimeout(timer)

    // 當(dāng)返回的函數(shù)被最后一次調(diào)用后（也就是用戶停止了某個連續(xù)的操作），
    // 再過 delay 毫秒就執(zhí)行 fn
    timer = setTimeout(function () {
      fn.apply(context, args)
    }, delay)
  }
}

【完整版】

// immediate： 是否立即執(zhí)行回調(diào)函數(shù); 其它參數(shù)同上
function debounce(fn, wait, immediate) {
    let timer = null

    return function() {
        let args = [].slice.call(arguments)

        if (immediate && !timer) {
            fn.apply(this, args)
        }

        if (timer) clearTimeout(timer)
        timer = setTimeout(() => { //箭頭函數(shù)，this指向外層環(huán)境
            fn.apply(this, args)
        }, wait)
    }
}

// 測試：
var fn = function() {
    console.log("debounce..")
}
oDiv.addEventListener("click", debounce(fn, 3000))

節(jié)流 throttle

固定頻次：減少執(zhí)行頻次，每隔一定時間執(zhí)行一次

【簡潔版】

/**
* 固定回調(diào)函數(shù)執(zhí)行的頻次
* @param fn {Function}   實際要執(zhí)行的函數(shù)
* @param interval {Number}  執(zhí)行間隔，單位是毫秒（ms）
*
* @return {Function}     返回一個“節(jié)流”函數(shù)
*/
var throttle = function (fn, interval) {
  // 記錄前一次時間
  var last = +new Date()
  var timer = null
  // 包裝完后返回 閉包函數(shù)
  return function () {
    var current = +new Date()
    var args = [].slice.call(arguments, 0)
    var context = this
    // 首先清除定時器
    clearTimeout(timer)
    // current 與last 間隔大于interval 執(zhí)行一次fn
    // 在一個周期內(nèi) last相對固定 current一直再增加
    // 這里可以保證調(diào)用很密集的情況下 current和last 必須是相隔interval 才會調(diào)用fn
    if (current - last >= interval) {
      fn.apply(context, args)
      last = current
    } else {
      // 如果沒有大于間隔 添加定時器
      // 這可以保證 即使后面沒有再次觸發(fā) fn也會在規(guī)定的interval后被調(diào)用
      timer = setTimeout(function() {
        fn.apply(context, args)
        last = current
      }, interval-(current - last))
    }
  }
}

【完整版】

/**
 * 頻率控制 返回函數(shù)連續(xù)調(diào)用時，func 執(zhí)行頻率限定為 次 / wait
 * 自動合并 data
 * 
 * 若無 option 選項，或者同時為true，即 option.trailing !== false && option.leading !== false，在固定時間開始時刻調(diào)用一次回調(diào)，并每個固定時間最后時刻調(diào)用回調(diào)
 * 若 option.trailing !== false && option.leading === false, 每個固定時間最后時刻調(diào)用回調(diào)
 * 若 option.trailing === false && option.leading  !== false,  只會在固定時間開始時刻調(diào)用一次回調(diào)
 * 若同時為false 則不會被調(diào)用
 *
 * @param  {function}   func      傳入函數(shù)
 * @param  {number}     wait      表示時間窗口的間隔
 * @param  {object}     options   如果想忽略開始邊界上的調(diào)用，傳入{leading: false}。默認(rèn)undefined
 *                                如果想忽略結(jié)尾邊界上的調(diào)用，傳入{trailing: false}， 默認(rèn)undefined
 * @return {function}             返回客戶調(diào)用函數(shù)
 */
function throttle (func, wait, options) {
  var context, args, result;
  var timeout = null;
  // 上次執(zhí)行時間點
  var previous = 0;
  if (!options) { options = {}; }
  // 延遲執(zhí)行函數(shù)
  function later () {
    // 若設(shè)定了開始邊界不執(zhí)行選項，上次執(zhí)行時間始終為0
    previous = options.leading === false ? 0 : Date.now();
    timeout = null;
    result = func.apply(context, args);
    if (!timeout) { context = args = null; }
  }
  return function (handle, data) {
    var now = Date.now();
    // 首次執(zhí)行時，如果設(shè)定了開始邊界不執(zhí)行選項，將上次執(zhí)行時間設(shè)定為當(dāng)前時間。
    if (!previous && options.leading === false) { previous = now; }
    // 延遲執(zhí)行時間間隔
    var remaining = wait - (now - previous);
    context = this;
    args = args ? [handle, Object.assign(args[1], data)] : [handle, data];
    // 延遲時間間隔remaining小于等于0，表示上次執(zhí)行至此所間隔時間已經(jīng)超過一個時間窗口
    // remaining大于時間窗口wait，表示客戶端系統(tǒng)時間被調(diào)整過
    if (remaining <= 0 || remaining > wait) {
      clearTimeout(timeout);
      timeout = null;
      previous = now;
      result = func.apply(context, args);
      if (!timeout) { context = args = null; }
    // 如果延遲執(zhí)行不存在，且沒有設(shè)定結(jié)尾邊界不執(zhí)行選項
    } else if (!timeout && options.trailing !== false) {
      timeout = setTimeout(later, remaining);
    }
    return result
  }
}

運用

游戲射擊，keydown 事件

文本輸入、自動完成，keyup 事件

鼠標(biāo)移動，mousemove 事件

DOM 元素動態(tài)定位，window 對象的 resize 和 scroll 事件

前兩者 debounce 和 throttle 都可以按需使用；后兩者肯定是用 throttle

underscore 實現(xiàn)源碼 debounce

_.debounce = function(func, wait, immediate) {
  var timeout, result;

  var later = function(context, args) {
    timeout = null;
    if (args) result = func.apply(context, args);
  };

  var debounced = restArgs(function(args) {
    if (timeout) clearTimeout(timeout);
    if (immediate) {
      var callNow = !timeout;
      timeout = setTimeout(later, wait);
      if (callNow) result = func.apply(this, args);
    } else {
      timeout = _.delay(later, wait, this, args);
    }

    return result;
  });

  debounced.cancel = function() {
    clearTimeout(timeout);
    timeout = null;
  };

  return debounced;
};

throttle

 _.throttle = function(func, wait, options) {
  var timeout, context, args, result;
  var previous = 0;
  if (!options) options = {};

  var later = function() {
    previous = options.leading === false ? 0 : _.now();
    timeout = null;
    result = func.apply(context, args);
    if (!timeout) context = args = null;
  };

  var throttled = function() {
    var now = _.now();
    if (!previous && options.leading === false) previous = now;
    var remaining = wait - (now - previous);
    context = this;
    args = arguments;
    if (remaining <= 0 || remaining > wait) {
      if (timeout) {
        clearTimeout(timeout);
        timeout = null;
      }
      previous = now;
      result = func.apply(context, args);
      if (!timeout) context = args = null;
    } else if (!timeout && options.trailing !== false) {
      timeout = setTimeout(later, remaining);
    }
    return result;
  };

  throttled.cancel = function() {
    clearTimeout(timeout);
    previous = 0;
    timeout = context = args = null;
  };

  return throttled;
};

【參考】
https://blog.coding.net/blog/...
https://github.com/lishengzxc...