前端進階之防抖與節流是什麼？

• 做者：陳大魚頭
• github： KRISACHAN
• 連接：github.com/YvetteLau/S…
• 背景：最近高級前端工程師 劉小夕 在 github 上開了個每一個工做日佈一個前端相關題的 repo，懷着學習的心態我也參與其中，如下爲個人回答，若是有不對的地方，很是歡迎各位指出。

防抖(debounce)

防抖是什麼？

防抖是什麼？防抖就是防止抖動，例如小朋友喜歡多動，停不下來，而後作家長的打一頓，讓小朋友安靜下來，這種行爲就叫作防抖。

(～o￣3￣)～

抖個機靈，哈哈哈~

抖動是一個很常見的控制函數在必定時間內執行多少次的技巧，其實就是肯定了函數執行的最小間隔，若是還在這個間隔內觸發函數，則從新計算。

舉個栗子~

你家有七個兒子，大兒子叫大娃，二兒子叫二娃，三兒子叫三娃，四兒子叫四娃，五兒子叫五娃，六兒子叫六娃，七兒子叫七娃。因爲七個孩子還小，他們的衣服你只能用手洗，一洗洗七套，一次要一個小時。若是洗到一半，你的七個孩子給你過來搗亂把衣服弄髒，那麼你又得花一個小時去洗，不搗亂，那麼你一個小時以後你的孩子衣服就又髒了，又能夠再花一個小時來洗衣服了。

具體實現

魚頭注：如下代碼來自優秀的JS庫 lodash

// 判斷是否是個對象
function isObject(value) {
  const type = typeof value
  return value != null && (type == 'object' || type == 'function')
}

/* * 建立一個 debounced 函數，延遲調用 func 直到 wait 以後 * cancel 方法用於取消 debounced * flush 方法用於當即調用 */

function debounce(func, wait, options) {
  let lastArgs,
    lastThis,
    maxWait,
    result,
    timerId,
    lastCallTime

  let lastInvokeTime = 0
  let leading = false
  let maxing = false
  let trailing = true

  // 繞過 requestAnimationFrame ，顯式地設置 wait = 0
  const useRAF = (!wait && wait !== 0 && typeof root.requestAnimationFrame === 'function')

  if (typeof func !== 'function') {
    throw new TypeError('Expected a function')
  }
  wait = +wait || 0
  if (isObject(options)) {
    leading = !!options.leading
    maxing = 'maxWait' in options
    maxWait = maxing ? Math.max(+options.maxWait || 0, wait) : maxWait
    trailing = 'trailing' in options ? !!options.trailing : trailing
  }

  function invokeFunc(time) {
    const args = lastArgs
    const thisArg = lastThis

    lastArgs = lastThis = undefined
    lastInvokeTime = time
    result = func.apply(thisArg, args)
    return result
  }

  function startTimer(pendingFunc, wait) {
    if (useRAF) {
      root.cancelAnimationFrame(timerId);
      return root.requestAnimationFrame(pendingFunc)
    }
    return setTimeout(pendingFunc, wait)
  }

  function cancelTimer(id) {
    if (useRAF) {
      return root.cancelAnimationFrame(id)
    }
    clearTimeout(id)
  }

  function leadingEdge(time) {
    // 重置任何 最大等待時間的計時器
    lastInvokeTime = time
    // 啓動計時器
    timerId = startTimer(timerExpired, wait)
    // 返回調用結果
    return leading ? invokeFunc(time) : result
  }

  function remainingWait(time) {
    const timeSinceLastCall = time - lastCallTime
    const timeSinceLastInvoke = time - lastInvokeTime
    const timeWaiting = wait - timeSinceLastCall

    return maxing
      ? Math.min(timeWaiting, maxWait - timeSinceLastInvoke)
      : timeWaiting
  }

  function shouldInvoke(time) {
    const timeSinceLastCall = time - lastCallTime
    const timeSinceLastInvoke = time - lastInvokeTime

    // 判斷是否應該調用函數
    return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
      (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait))
  }

  function timerExpired() {
    const time = Date.now()
    if (shouldInvoke(time)) {
      return trailingEdge(time)
    }
    // 重置定時器
    timerId = startTimer(timerExpired, remainingWait(time))
  }

  function trailingEdge(time) {
    timerId = undefined

    // 若是我有最後一個參數，就意味着函數須要調用
    // 至少執行一次防抖
    if (trailing && lastArgs) {
      return invokeFunc(time)
    }
    lastArgs = lastThis = undefined
    return result
  }

  function cancel() {
    if (timerId !== undefined) {
      cancelTimer(timerId)
    }
    lastInvokeTime = 0
    lastArgs = lastCallTime = lastThis = timerId = undefined
  }

  function flush() {
    return timerId === undefined ? result : trailingEdge(Date.now())
  }

  function pending() {
    return timerId !== undefined
  }

  function debounced(...args) {
    const time = Date.now()
    const isInvoking = shouldInvoke(time)

    lastArgs = args
    lastThis = this
    lastCallTime = time

    if (isInvoking) {
      if (timerId === undefined) {
        return leadingEdge(lastCallTime)
      }
      if (maxing) {
        // 處理循環調用
        timerId = startTimer(timerExpired, wait)
        return invokeFunc(lastCallTime)
      }
    }
    if (timerId === undefined) {
      timerId = startTimer(timerExpired, wait)
    }
    return result
  }
  debounced.cancel = cancel
  debounced.flush = flush
  debounced.pending = pending
  return debounced
}
複製代碼

使用方法以下：

var 打印一些東西啦 = function (event) {
	console.log(event);
};

document.querySelector('html').addEventListener('click', debounce(打印一些東西啦, 1000));
複製代碼

適用場景

如下就舉幾個咱們平常開發中可能會用上 debounce 的栗子：

• 輸入框搜索，當用戶中止搜索一段時間以後再執行請求操做，防止屢次觸發而給服務端帶來壓力
• 防止重複觸發 resize 或者 scroll 事件
• 還有吧，可是懶得動腦了~

節流(throttle)

節流是什麼？

節流： 節流就是流體在管道內流動，忽然遇到截面變窄，而使壓力降低的現象。節制流入或流出，尤指用節流閥調節。

出處：語出《荀子·富國》：「百姓時和、事業得敘者，貨之源也； 等賦府庫者，貨之流也。故明主必謹養其和，節其流，開其源，而時斟酌焉，潢然使天下必有餘而上不憂不足。」後以「開源節流」指開闢財源，節約開支。

其實做用跟定義就是上面的意思，在平常開發中，咱們常常會有頻繁調用或執行某一函數的需求，其實按實際用戶狀況，可能 100ms 甚至 1s 調用一次就OK，因此須要用到函數節流，在必定的時間間隔以後再執行函數。

使用場景

場景不少，常見的有：

1. 屏幕尺寸變化時頁面內容的變更，執行相應邏輯；

2. 監聽鼠標滾動時間，執行相應邏輯；

3. 監聽重複點擊時的時間，執行相應邏輯

具體實現

下面依然是 lodash 的代碼實現：

function isObject(value) {
  const type = typeof value
  return value != null && (type == 'object' || type == 'function')
}

function throttle(func, wait, options) {
  let leading = true
  let trailing = true

  if (typeof func !== 'function') {
    throw new TypeError('Expected a function')
  }
  if (isObject(options)) {
    leading = 'leading' in options ? !!options.leading : leading
    trailing = 'trailing' in options ? !!options.trailing : trailing
  }
  return debounce(func, wait, {
    leading,
    trailing,
    'maxWait': wait,
  })
}

複製代碼

使用方法以下：

var 打印一些東西啦 = function (event) {
	console.log(event);
};

document.querySelector('html').addEventListener('click', throttle(打印一些東西啦, 1000));
複製代碼

若是你、喜歡探討技術，或者對本文有任何的意見或建議，你能夠掃描下方二維碼，關注微信公衆號「 魚頭的Web海洋」，隨時與魚頭互動。歡迎！衷心但願能夠碰見你。