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

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

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

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

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

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

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

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

    // trailing edge將在waitTime時(shí)間以后到來(lái)，進(jìn)入穩(wěn)定狀態(tài)(前提是這段時(shí)間內(nèi)沒(méi)有被調(diào)用)
    timeout = setTimeout(() => {
      // 這個(gè)回調(diào)被執(zhí)行時(shí)，說(shuō)明已經(jīng)經(jīng)過(guò)waitTime沒(méi)有被調(diào)用了，進(jìn)入穩(wěn)定狀態(tài)
      timeout = null;
      // 此時(shí)是trailing edge。如果配置了callAfterStable，要觸發(fā)func
      if (callAfterStable) func.apply(this, args);
    }, waitTime);
  };
  // 使用者可以調(diào)用這個(gè)函數(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)用來(lái)計(jì)算waitTime的；而節(jié)流是基于上次func調(diào)用來(lái)計(jì)算waitTime的，只要距離上次func調(diào)用超過(guò)了waitTime，就可以進(jìn)行下次func調(diào)用。

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

// immediate傳入true，將在leading edge就第一次調(diào)用func
// 否則，將在 leading edge+waitTime 的時(shí)候才第一次調(diào)用func
function throttle(func, waitTime = 1000, immediate = true) {
  let timeout = null,
    // called表示自從上次func調(diào)用以后，是否是否有調(diào)用過(guò)throttled
    called,
    // 存儲(chǔ)上一次調(diào)用throttled時(shí)提供的args和this，用來(lái)在timeExpired時(shí)調(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了，
      // 因?yàn)樵趙aitTime之前調(diào)用過(guò)了func，且自從那以后，throttled就沒(méi)有被調(diào)用過(guò)。
      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時(shí)，leading edge下一次的timeExpired必須調(diào)用func
        // 否則，如果在(leading edge, leading edge + waitTime]這段時(shí)間內(nèi)沒(méi)有調(diào)用過(guò)throttled，func一次也不會(huì)執(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 不能同時(shí)為false"); // 下面會(huì)指出原因
  let timeout = null,
    // 上一次調(diào)用func的時(shí)間
    previous = 0;
  const throttled = function(...args) {
    const now = Date.now();
    // immediate==false時(shí)，previous==0有特殊的含義：當(dāng)前處于穩(wěn)定狀態(tài)，本次調(diào)用throttled不立即觸發(fā)func
    // 阻止立即觸發(fā)func的方式：previous = now，相當(dāng)于0秒前剛剛調(diào)用過(guò)了func
    // 因此穩(wěn)定狀態(tài)下的第一次throttled調(diào)用會(huì)進(jìn)入elseif，將func推遲調(diào)用
    if (!previous && !immediate) previous = now;
    const remain = waitTime - (now - previous);
    // immediate 和 callAfterStable 不能同時(shí)為false，否則if和elseif語(yǔ)句塊都永遠(yuǎn)不會(huì)調(diào)用
    if (remain < 0 || remain > waitTime) {
      // 距離上一次調(diào)用func至少經(jīng)過(guò)了waitTime，本次throttled立即觸發(fā)func
      if (timeout) {
        // 有可能有timer回調(diào)仍阻塞在時(shí)間隊(duì)列中（雖然肯定已經(jīng)超時(shí)），銷毀它
        clearTimeout(timeout);
        timeout = null;
      }
      func.apply(this, args);
      previous = now;
    } else if (!timeout && callAfterStable) {
      // throttled調(diào)用時(shí)，距離上一次調(diào)用func還沒(méi)有過(guò)去waitTime，
      // 不立即觸發(fā)func，而是安排到previous+waitTime時(shí)刻
      // 判斷!timeout是為了防止安排多個(gè)func在previous+waitTime時(shí)刻調(diào)用
      timeout = setTimeout(() => {
        func.apply(this, args);
        // immediate==false時(shí)，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