防抖（debounce）

原理：在事件被觸發n秒後再執行回撥，如果在這n秒內又被觸發，則重新計算時間。（最後一次優先）

例子：如果有人進電梯，那電梯將在10秒鐘後出發，這時如果又有人進電梯了，我們又得等10秒再出發。

思路：通過閉包維護一個變數，此變數代表是否已經開始計時，如果已經開始計時則清空之前的計時器，重新開始計時。

funtion debounce( fn, time ) {
    // 使用閉包來儲存變數
   let timeout;
   return function() {
        if(!timeout) {
            // 如果持續存在，就清掉前面的定時器。
            clearTimeOut(timeout);
            return;
        } 
        timeout = setTimeout(fn, time)
   }   
}    

// 處理函式
function handle() {
  console.log(123)  
}

//新增監聽事件
window.addEventListener('reseize', debounce(handle, 500));        

節流（throttle）

原理：規定一個單位時間，在這個單位時間內，只能有一次觸發事件的回撥函式執行，如果在同一個單位時間內某事件被觸發多次，只有一次能生效。（一次優先）

例子：遊戲內的技能冷卻，無論你按多少次，技能只能在冷卻好了之後才能再次觸發

思路：通過閉包維護一個變數，此變數代表是否允許執行函式，如果允許則執行函式並且把該變數修改為不允許，並使用定時器在規定時間後恢復該變數。

function throttle ( fn, time ) {
    var timer = null;
    return function() {
         var _this = this;
         var args = arguments;
         if(!timer) {
            timer = setTimeout(function () {
                fn.apply(_this, args);   
                timer = null;
            }, time)
        }    
    }  
}    

函式防抖和函式節流都是防止某一時間頻繁觸發，但是這兩兄弟之間的原理卻不一樣。
函式防抖是某一段時間內只執行一次，而函式節流是間隔時間執行。
使用場景

debounce
1.search搜尋聯想，使用者在不斷輸入值時，用防抖來節約請求資源。
2.window觸發resize的時候，不斷的調整瀏覽器視窗大小會不斷的觸發這個事件，用防抖來讓其只觸發一次。

throttle
1.滑鼠不斷點選觸發，mousedown(單位時間內只觸發一次)。
2.監聽滾動事件，比如是否滑到底部自動載入更多，用throttle來判斷。