摘要：防抖防抖的作用是將多個連續(xù)的調(diào)用合并為一次調(diào)用。防抖與節(jié)流之間的重要區(qū)別是，防抖是基于上次調(diào)用來計算的而節(jié)流是基于上次調(diào)用來計算的，只要距離上次調(diào)用超過了，就可以進(jìn)行下次調(diào)用。實現(xiàn)修改自參考資料。個人認(rèn)為實現(xiàn)更好理解。

防抖的作用是將多個連續(xù)的debounced調(diào)用合并為一次func調(diào)用。作用見參考資料1。

兩次debounced調(diào)用的間隔小于waitTime，則視為連續(xù)的調(diào)用。

如果距離上次debounced調(diào)用已經(jīng)過去了waitTime的時間，則說明該輪連續(xù)調(diào)用已經(jīng)結(jié)束（進(jìn)入穩(wěn)定狀態(tài)）。這個時間點也被稱為trailing edge。

在trailing edge以后的第一次debounced調(diào)用是下一輪連續(xù)調(diào)用的開始。當(dāng)然，第一次debounced調(diào)用也是一輪連續(xù)調(diào)用的開始。這個時間點也被稱為leading edge。

immediate參數(shù)可以控制是否在leading edge執(zhí)行一次func調(diào)用。callAfterStable參數(shù)控制是否在trailing edge執(zhí)行一次func調(diào)用。因此，func調(diào)用可以放在連續(xù)調(diào)用開始時，也可以放在結(jié)束時，也可以都放。一般設(shè)置immediate = false,callAfterStable = true，將func調(diào)用放在連續(xù)調(diào)用結(jié)束時。

假設(shè)debounced的調(diào)用一直持續(xù)不斷，且相鄰間隔都小于waitTime，則意味著連續(xù)調(diào)用一直沒有結(jié)束，放在trailing edge的func調(diào)用一直不會執(zhí)行。

function debounce(
  func,
  waitTime = 1000,
  immediate = false,
  callAfterStable = true
) {
  if (!immediate && !callAfterStable)
    throw new Error("immediate 和 callAfterStable 不能同時為false"); // 否則func.apply永遠(yuǎn)不會調(diào)用
  let timeout = null;
  const debounced = function(...args) {
    // timeout的值決定當(dāng)前是否處于穩(wěn)定狀態(tài)(已經(jīng)經(jīng)過waitTime沒有被調(diào)用了)
    // 如果已經(jīng)存在一個定時器，說明現(xiàn)在是處于一輪連續(xù)調(diào)用當(dāng)中（非穩(wěn)定狀態(tài)），需要重新計時
    if (timeout) clearTimeout(timeout);
    // 否則，此時是leading edge。如果配置了immediate，此時要觸發(fā)func
    else if (immediate) func.apply(this, args);

    // trailing edge將在waitTime時間以后到來，進(jìn)入穩(wěn)定狀態(tài)(前提是這段時間內(nèi)沒有被調(diào)用)
    timeout = setTimeout(() => {
      // 這個回調(diào)被執(zhí)行時，說明已經(jīng)經(jīng)過waitTime沒有被調(diào)用了，進(jìn)入穩(wěn)定狀態(tài)
      timeout = null;
      // 此時是trailing edge。如果配置了callAfterStable，要觸發(fā)func
      if (callAfterStable) func.apply(this, args);
    }, waitTime);
  };
  // 使用者可以調(diào)用這個函數(shù)，強(qiáng)行進(jìn)入穩(wěn)定狀態(tài)
  debounced.forceStabilize = function() {
    if (timeout) {
      clearTimeout(timeout);
      timeout = null;
    }
  };
  return debounced;
}

節(jié)流的作用是限制func調(diào)用的頻率（最多每waitTime調(diào)用一次）。作用見參考資料2。

防抖與節(jié)流之間的重要區(qū)別是，防抖是基于上次debounced調(diào)用來計算waitTime的；而節(jié)流是基于上次func調(diào)用來計算waitTime的，只要距離上次func調(diào)用超過了waitTime，就可以進(jìn)行下次func調(diào)用。

實現(xiàn)2修改自參考資料2。個人認(rèn)為實現(xiàn)1更好理解。

// immediate傳入true，將在leading edge就第一次調(diào)用func
// 否則，將在 leading edge+waitTime 的時候才第一次調(diào)用func
function throttle(func, waitTime = 1000, immediate = true) {
  let timeout = null,
    // called表示自從上次func調(diào)用以后，是否是否有調(diào)用過throttled
    called,
    // 存儲上一次調(diào)用throttled時提供的args和this，用來在timeExpired時調(diào)用func
    lastArgs,
    lastThis;

  function timeExpired() {
    if (called) {
      func.apply(lastThis, lastArgs);
      called = false;
      timeout = setTimeout(timeExpired, waitTime);
    } else {
      // trailing edge
      // trailing edge不調(diào)用func了，
      // 因為在waitTime之前調(diào)用過了func，且自從那以后，throttled就沒有被調(diào)用過。
      timeout = null;
      // 釋放內(nèi)存
      lastArgs = lastThis = null;
    }
  }

  function throttled(...args) {
    lastArgs = args;
    lastThis = this;

    if (!timeout) {
      // leading edge
      if (immediate) {
        func.apply(lastThis, lastArgs);
        called = false;
      } else {
        // !immediate時，leading edge下一次的timeExpired必須調(diào)用func
        // 否則，如果在(leading edge, leading edge + waitTime]這段時間內(nèi)沒有調(diào)用過throttled，func一次也不會執(zhí)行
        called = true;
      }
      timeout = setTimeout(timeExpired, waitTime);
    } else {
      called = true;
    }
  }

  throttled.cancle = function() {
    if (timeout) {
      clearTimeout(timeout);
      timeout = null;
      lastArgs = lastThis = null;
    }
  };

  return throttled;
}

function throttle(
  func,
  waitTime = 1000,
  immediate = true,
  callAfterStable = true
) {
  if (!immediate && !callAfterStable)
    throw new Error("immediate 和 callAfterStable 不能同時為false"); // 下面會指出原因
  let timeout = null,
    // 上一次調(diào)用func的時間
    previous = 0;
  const throttled = function(...args) {
    const now = Date.now();
    // immediate==false時，previous==0有特殊的含義：當(dāng)前處于穩(wěn)定狀態(tài)，本次調(diào)用throttled不立即觸發(fā)func
    // 阻止立即觸發(fā)func的方式：previous = now，相當(dāng)于0秒前剛剛調(diào)用過了func
    // 因此穩(wěn)定狀態(tài)下的第一次throttled調(diào)用會進(jìn)入elseif，將func推遲調(diào)用
    if (!previous && !immediate) previous = now;
    const remain = waitTime - (now - previous);
    // immediate 和 callAfterStable 不能同時為false，否則if和elseif語句塊都永遠(yuǎn)不會調(diào)用
    if (remain < 0 || remain > waitTime) {
      // 距離上一次調(diào)用func至少經(jīng)過了waitTime，本次throttled立即觸發(fā)func
      if (timeout) {
        // 有可能有timer回調(diào)仍阻塞在時間隊列中（雖然肯定已經(jīng)超時），銷毀它
        clearTimeout(timeout);
        timeout = null;
      }
      func.apply(this, args);
      previous = now;
    } else if (!timeout && callAfterStable) {
      // throttled調(diào)用時，距離上一次調(diào)用func還沒有過去waitTime，
      // 不立即觸發(fā)func，而是安排到previous+waitTime時刻
      // 判斷!timeout是為了防止安排多個func在previous+waitTime時刻調(diào)用
      timeout = setTimeout(() => {
        func.apply(this, args);
        // immediate==false時，previous=0表示進(jìn)入穩(wěn)定狀態(tài)，設(shè)置它是為了阻止下一次的immediate調(diào)用
        previous = immediate ? Date.now() : 0;
        timeout = null;
      }, remain);
    }
  };
  throttled.forceStabilize = function() {
    previous = 0;
    if (timeout) {
      clearTimeout(timeout);
      timeout = null;
    }
  };
  return throttled;
}

JavaScript專題之跟著underscore學(xué)防抖

JavaScript專題之跟著underscore學(xué)節(jié)流

Debouncing and Throttling Explained Through Examples