防抖、節流、閉包的真諦所在

哈哈，我也是一個標題黨，今天想總結一下，今天學到的東西，便於今后復習拿出來看。

首先呢，防抖是什么？

防抖： 持續觸發事件時，一定時間段內沒有再觸發事件，事件處理函數才會執行一次，如果設定的時間到來之前，又一次觸發了事件，就重新開始延時。

定義比較難懂，舉一個比較貼切的例子就是 ，坐電梯。  每次電梯開門時就會停留10s鍾等待乘客，當10s中結束后，電梯會自動關門，但如果這時又有乘客進入，則電梯又會等待10s。沒錯，這就是防抖的定義。

再來介紹一個防抖的應用場景：

　　　　例如：使用百度搜索學習資源時，當向輸入框輸入 搜索詞 后，才會在搜索框推薦與你搜索詞相關的字詞。而不是你每輸入一個字就推薦一下。

函數防抖就是解決實時搜索（kepup）、拖拽(mousemove)等問題的。

 

 

可見，每次觸發事件都會執行回調函數，現在加入防抖處理：

var debounce = function(func, delay) {
  var timer = null
  return function() {
      var that = this;
      var args = arguments;
      
      if(timer) {
          clearTimeout(timer);
      }

      timer = setTimeout(function() {
          func.apply(that, args);
      }, delay)
  }
}

ipt.addEventListener('keyup', debounce(function(e){
  console.log(e.target.value);
}, 400))

　　效果如下：

可見，輸入框在停止輸入400ms后執行回調。在防抖后的回調函數用 timer 記錄計時，每次執行回調的時候會先清空之前的計時。注意這里的timer是閉包變量，始終保持着上一個計時。

這就是所謂的防抖。

函數節流

節流throttle: 讓事件的回調一定時間間隔只執行一次。節流函數有兩種實現方式，一種是記錄增量，一種是定時方式。