函數防抖和節流

防抖

你是否在平常開發中遇到一個問題，在滾動事件中須要作個複雜計算或者實現一個按鈕的防二次點擊操做。

這些需求均可以經過函數防抖動來實現。尤爲是第一個需求，若是在頻繁的事件回調中作複雜計算，頗有可能致使頁面卡頓，不如將屢次計算合併爲一次計算，只在一個精確點作操做。

PS：防抖和節流的做用都是防止函數屢次調用。區別在於，假設一個用戶一直觸發這個函數，且每次觸發函數的間隔小於wait，防抖的狀況下只會調用一次，而節流的 狀況會每隔必定時間（參數wait）調用函數。

咱們先來看一個袖珍版的防抖理解一下防抖的實現：

/** * 防抖函數，返回函數連續調用時，空閒時間必須大於或等於 wait，func 纔會執行 * * @param {function} func 回調函數 * @param {number} wait 表示時間窗口的間隔 * @param {boolean} immediate 設置爲ture時，是否當即調用函數 * @return {function} 返回客戶調用函數 */
  function debounce (func, wait = 50, immediate = true) {
    let timer, context, args

    // 延遲執行函數
    const later = () => setTimeout(() => {
      // 延遲函數執行完畢，清空緩存的定時器序號
      timer = null
      // 延遲執行的狀況下，函數會在延遲函數中執行
      // 使用到以前緩存的參數和上下文
      if (!immediate) {
        func.apply(context, args)
        context = args = null
      }
    }, wait)

    // 這裏返回的函數是每次實際調用的函數
    return function(...params) {
      // 若是沒有建立延遲執行函數（later），就建立一個
      if (!timer) {
        timer = later()
        // 若是是當即執行，調用函數
        // 不然緩存參數和調用上下文
        if (immediate) {
          func.apply(this, params)
        } else {
          context = this
          args = params
        }
        // 若是已有延遲執行函數（later），調用的時候清除原來的並從新設定一個
        // 這樣作延遲函數會從新計時
      } else {
        clearTimeout(timer)
        timer = later()
      }
    }
  }
複製代碼

節流

防抖動和節流本質是不同的。防抖動是將屢次執行變爲最後一次執行，節流是將屢次執行變成每隔一段時間執行。

/** * underscore 節流函數，返回函數連續調用時，func 執行頻率限定爲 次 / wait * * @param {function} func 回調函數 * @param {number} wait 表示時間窗口的間隔 * @param {object} options 若是想忽略開始函數的的調用，傳入{leading: false}。 * 若是想忽略結尾函數的調用，傳入{trailing: false} * 二者不能共存，不然函數不能執行 * @return {function} 返回客戶調用函數 */
_.throttle = function(func, wait, options) {
    var context, args, result;
    var timeout = null;
    // 以前的時間戳
    var previous = 0;
    // 若是 options 沒傳則設爲空對象
    if (!options) options = {};
    // 定時器回調函數
    var later = function() {
      // 若是設置了 leading，就將 previous 設爲 0
      // 用於下面函數的第一個 if 判斷
      previous = options.leading === false ? 0 : _.now();
      // 置空一是爲了防止內存泄漏，二是爲了下面的定時器判斷
      timeout = null;
      result = func.apply(context, args);
      if (!timeout) context = args = null;
    };
    return function() {
      // 得到當前時間戳
      var now = _.now();
      // 首次進入前者確定爲 true
	  // 若是須要第一次不執行函數
	  // 就將上次時間戳設爲當前的
      // 這樣在接下來計算 remaining 的值時會大於0
      if (!previous && options.leading === false) previous = now;
      // 計算剩餘時間
      var remaining = wait - (now - previous);
      context = this;
      args = arguments;
      // 若是當前調用已經大於上次調用時間 + wait
      // 或者用戶手動調了時間
 	  // 若是設置了 trailing，只會進入這個條件
	  // 若是沒有設置 leading，那麼第一次會進入這個條件
	  // 還有一點，你可能會以爲開啓了定時器那麼應該不會進入這個 if 條件了
	  // 其實仍是會進入的，由於定時器的延時
	  // 並非準確的時間，極可能你設置了2秒
	  // 可是他須要2.2秒才觸發，這時候就會進入這個條件
      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) {
        // 判斷是否設置了定時器和 trailing
	    // 沒有的話就開啓一個定時器
        // 而且不能不能同時設置 leading 和 trailing
        timeout = setTimeout(later, remaining);
      }
      return result;
    };
  };
複製代碼

以上內容摘自防抖和節流