防抖簡介

1. resize和scroll等事件操作的時候，會非常頻繁的觸發導致頁面不斷的重新渲染，非常影響性能，加重瀏覽器負擔，導致用戶體驗不好，防抖函數就是當事件持續觸發事件時，debounce函數會把事件合並且不會觸發回調，當停止觸發事件delay時長的時候才會觸發事件。
   ```javascript
   function debounce(fn, delay, immediate) {
   // fn是回調函數，delay是延遲時間，immediate是否先執行一次再節流
   var timer = null,
   _this, args
   return function() {
   //
   _this = this
   args = arguments
   // 如果有定時器先清除，讓定時器的函數不執行
   timer && clearTimeout(timer)
   if (immediate) {
   // 沒有定時器的話，告訴後面的函數可以先執行一次，首次進入函數沒有定義定時器，do為true
   var do = !timer
   // 然後在delay時間以後將timer設置為null，首次執行之後，只有在timer為null之後才會再次執行
   timer = setTimeout(function() {
   timer = null
   }, delay)
   if (do) {
   fn.apply(_this, args)
   }
   } else {
   // 如果沒設置第三個參數，就是什麽時候停止，之後delay時間才執行
   timer = setTimeout(function() {
   fn.apply(_this, args)
   }, delay)
   }

   }
   }

```

節流簡介

1. 節流也是解決類似的問題，節流只允許回調函數在規定時間內只執行一次，和防抖的最大區別是，無論多頻繁的觸發事件，都會保證在規定時間內執行一次回調
   ```javascript
   function throttle(fn, delay) {
   var before = Date.now()
   return function() {
   var _this = this,
   args = arguments
   var now = Date.now()
   if (now - before - delay >= 0) {
   before = now
   setTimeout(function() {
   fn.apply(_this, args)
   }, delay)
   }
   }
   }

```

防抖和節流方法實現