摘要：首先重置防抖函數最后調用時間，然后去觸發一個定時器，保證后接下來的執行。這就避免了手動管理定時器。

??之前遇到過一個場景，頁面上有幾個d3.js繪制的圖形。如果調整瀏覽器可視區大小，會引發圖形重繪。當圖中的節點比較多的時候，頁面會顯得異常卡頓。為了限制類似于這種短時間內高頻率觸發的情況，我們可以使用防抖函數。

??實際開發過程中，這樣的情況其實很多，比如：

頁面的scroll事件

input框等的輸入事件

拖拽事件用到的mousemove等

??先說說防抖和節流是個啥，有啥區別

防抖：設定一個時間間隔，當某個頻繁觸發的函數執行一次后，在這個時間間隔內不會再次被觸發，如果在此期間嘗試觸發這個函數，則時間間隔會重新開始計算。
節流：設定一個時間間隔，某個頻繁觸發的函數，在這個時間間隔內只會執行一次。也就是說，這個頻繁觸發的函數會以一個固定的周期執行。

??大致捋一遍代碼結構。為了方便閱讀，我們先把源碼中的Function注釋掉。

function debounce(func, wait, options) {
    // 代碼一開始，以閉包的形式定義了一些變量
      var lastArgs,  //  最后一次debounce的arguments，它其實起一個標記位的作用，后面會提到
          lastThis,  //  就是last this，用來修正this指向
          maxWait,   //  存儲option里面傳入的maxWait值，最大等待時間
          result,    //  其實這個result始終都是undefined
          timerId,   // setTimeout賦給它，用于表示當前定時器
          lastCallTime,   // 最后一次調用debounce的時刻
          lastInvokeTime = 0,    //  最后一次調用用戶傳入函數的時刻
          leading = false,   //  是否在一開始就執行用戶傳入的函數
          maxing = false,    //  是否有最大等待時間
          trailing = true;   //  是否在等待周期結束后執行用戶傳入的函數

    //  用戶傳入的fun必須是個函數，否則報錯
      if (typeof func != "function") {
        throw new TypeError(FUNC_ERROR_TEXT);
      }
      
    //  toNumber是lodash封裝的一個轉類型的方法
      wait = toNumber(wait) || 0;
      
    //  獲取用戶傳入的配置
      if (isObject(options)) {
        leading = !!options.leading;
        maxing = "maxWait" in options;
        maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
        trailing = "trailing" in options ? !!options.trailing : trailing;
      }

    //  執行用戶傳入的函數
      function invokeFunc(time) {
        // ......
      }

    //  防抖開始時執行的操作
      function leadingEdge(time) {)
        // ......
      }

    //  計算仍然需要等待的時間
      function remainingWait(time) {
        // ......
      }

    //  判斷此時是否應該執行用戶傳入的函數
      function shouldInvoke(time) {
        // ......
      }

    //  等待時間結束后的操作
      function timerExpired() {
        // ......
      }

    //  執行用戶傳入的函數
      function trailingEdge(time) {
        // ......
      }

    //  取消防抖
      function cancel() {
        // ......
      }

     //  立即執行用戶傳入的函數
      function flush() {
        // ......
      }

    // 防抖開始的入口
      function debounced() {
        // ......
      }
      
      
      debounced.cancel = cancel;
      debounced.flush = flush;
      return debounced;
    }

我們先從入口函數開始。函數開始執行后，首先會出現三種情況：

時間上達到了可以執行的條件；

時間上不滿足條件，但是此時的定時器并沒有啟動；

不滿足條件，返回undefined

??說實話，第二種情況沒想到場景，哪位大佬給補充一下呢。

??代碼中timerId = setTimeout(timerExpired, wait);是用來設置定時器，到時間后觸發trailingEdge這個函數。

function debounced() {
        var time = now(),
            isInvoking = shouldInvoke(time);   // 判斷此時是否可以開始執行用戶傳入的函數
        
        lastArgs = arguments;
        lastThis = this;
        lastCallTime = time;

        if (isInvoking) {
          // 如果此時并沒有定時器存在，就開始進入防抖階段
          if (timerId === undefined) {
            return leadingEdge(lastCallTime);
          }
          //  如果設置了最大等待時間，便立即執行用戶傳入的函數
          if (maxing) {
            // Handle invocations in a tight loop.
            timerId = setTimeout(timerExpired, wait);
            return invokeFunc(lastCallTime);
          }
        }
        if (timerId === undefined) {
          timerId = setTimeout(timerExpired, wait);
        }
        
        //  不滿足條件，return undefined
        return result;
      }

??我們先來看看shouldInvoke是如何判斷函數是否可以執行的。

      function shouldInvoke(time) {
        //  lastCallTime初始值是undefined，lastInvokeTime初始值是0，
        //  防抖函數被手動取消后，這兩個值會被設為初始值
        var timeSinceLastCall = time - lastCallTime,
            timeSinceLastInvoke = time - lastInvokeTime;

        // Either this is the first call, activity has stopped and we"re at the
        // trailing edge, the system time has gone backwards and we"re treating
        // it as the trailing edge, or we"ve hit the `maxWait` limit.
        return (
                lastCallTime === undefined ||   //  初次執行
                (timeSinceLastCall >= wait) ||  //  上次調用時刻距離現在已經大于wait值
                (timeSinceLastCall < 0) ||      //  當前時間-上次調用時間小于0，應該只可能是手動修改了系統時間吧
                (maxing && timeSinceLastInvoke >= maxWait)  //  設置了最大等待時間，且已超時
            );
      }

??我們繼續分析函數開始的階段leadingEdge。首先重置防抖函數最后調用時間，然后去觸發一個定時器，保證wait后接下來的執行。最后判斷如果leading是true的話，立即執行用戶傳入的函數：

      function leadingEdge(time) {
        // Reset any `maxWait` timer.
        lastInvokeTime = time;
        // Start the timer for the trailing edge.
        timerId = setTimeout(timerExpired, wait);
        // Invoke the leading edge.
        return leading ? invokeFunc(time) : result;
      }

??我們已經不止一次去設定觸發器了，來我們探究一下里面到底做了啥。其實很簡單，判斷時間是否符合執行條件，符合的話觸發trailingEdge，也就是后續操作，否則計算需要等待的時間，并重新調用這個函數，其實這里就是防抖的核心所在了。

      function timerExpired() {
        var time = now();
        if (shouldInvoke(time)) {
          return trailingEdge(time);
        }
        // Restart the timer.
        timerId = setTimeout(timerExpired, remainingWait(time));
      }

??至于如何重新計算剩余時間的，這里不作過多解釋，大家一看便知。

      function remainingWait(time) {
        var timeSinceLastCall = time - lastCallTime,
            timeSinceLastInvoke = time - lastInvokeTime,
            timeWaiting = wait - timeSinceLastCall;

        return maxing
          ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke)
          : timeWaiting;
      }

??我們說說等待時間到了以后的操作。重置了一些本周期的變量。并且，如果trailing是true而且lastArgs存在時，才會再次執行用戶傳入的參數。這里解釋了文章開頭提到的lastArgs只是個標記位，如注釋所說，他表示debounce至少執行了一次。

      function trailingEdge(time) {
        timerId = undefined;

        // Only invoke if we have `lastArgs` which means `func` has been
        // debounced at least once.
        if (trailing && lastArgs) {
          return invokeFunc(time);
        }
        lastArgs = lastThis = undefined;
        return result;
      }

??執行用戶傳入的函數比較簡單，我們知道call和apply是會立即執行的，其實最后的result還是undefined。

    function invokeFunc(time) {
        var args = lastArgs,
            thisArg = lastThis;
        //  重置了一些條件
        lastArgs = lastThis = undefined;
        lastInvokeTime = time;
        //  執行用戶傳入函數
        result = func.apply(thisArg, args);
        return result;
      }

??最后就是取消防抖和立即執行用戶傳入函數的過程了，代碼一目了然，不作過多解釋。

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

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

??節流其實原理跟防抖是一樣的，只不過觸發條件不同而已，其實就是maxWait為wait的防抖函數。

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

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

??我們發現，其實lodash除了在cancle函數中使用了清除定時器的操作外，其他地方并沒有去關心定時器，而是很巧妙的在定時器里加了一個判斷條件來判斷后續函數是否可以執行。這就避免了手動管理定時器。

??lodash替我們考慮到了一些比較少見的情景，而且還有一定的容錯性。即便ES6實現了很多目前常用的工具函數，但是面對復雜的情景，我們依然可以以按需引入的方式使用lodash的一些函數來提升開發效率，同時使得我們的程序更加健壯。