節流（throttle）與防抖（debounce）

頻繁觸發回調致使的大量計算會引起頁面的抖動甚至卡頓。爲了規避這種狀況，咱們須要一些手段來控制事件被觸發的頻率。就是在這樣的背景下，throttle（事件節流）和 debounce（事件防抖）出現了。

「節流」與「防抖」的本質

這兩個東西都以閉包的形式存在。

它們經過對事件對應的回調函數進行包裹、以自由變量的形式緩存時間信息，最後用 setTimeout 來控制事件的觸發頻率。

Throttle： 第一我的說了算

throttle 的中心思想在於：在某段時間內，無論你觸發了多少次回調，我都只認第一次，並在計時結束時給予響應。

先給你們講個小故事：如今有一個旅客剛下了飛機，須要用車，因而打電話叫了該機場惟一的一輛機場大巴來接。司機開到機場，心想來都來了，多接幾我的一塊兒走吧，這樣這趟才跑得值——我等個十分鐘看看。因而司機一邊打開了計時器，一邊招呼後面的客人陸陸續續上車。在這十分鐘內，後面下飛機的乘客都只能乘這一輛大巴，十分鐘過去後，無論後面還有多少沒擠上車的乘客，這班車都必須發走。

在這個故事裏，「司機」 就是咱們的節流閥，他控制發車的時機；「乘客」就是由於咱們頻繁操做事件而不斷涌入的回調任務，它須要接受「司機」的安排；而「計時器」，就是以自由變量形式存在的時間信息，它是「司機」決定發車的依據；最後「發車」這個動做，就對應到回調函數的執行。

總結下來，所謂的「節流」，是經過在一段時間內無視後來產生的回調請求來實現的。只要一位客人叫了車，司機就會爲他開啓計時器，必定的時間內，後面須要乘車的客人都得排隊上這一輛車，誰也沒法叫到更多的車。

對應到實際的交互上是同樣同樣的：每當用戶觸發了一次 scroll 事件，咱們就爲這個觸發操做開啓計時器。一段時間內，後續全部的 scroll 事件都會被看成「一輛車的乘客」——它們沒法觸發新的 scroll 回調。直到「一段時間」到了，第一次觸發的 scroll 事件對應的回調纔會執行，而「一段時間內」觸發的後續的 scroll 回調都會被節流閥無視掉。

理解了大體的思路，咱們如今一塊兒實現一個 throttle：

// fn是咱們須要包裝的事件回調, interval是時間間隔的閾值
function throttle(fn, interval) {
  // last爲上一次觸發回調的時間
  let last = 0
  
  // 將throttle處理結果看成函數返回
  return function () {
      // 保留調用時的this上下文
      let context = this
      // 保留調用時傳入的參數
      let args = arguments
      // 記錄本次觸發回調的時間
      let now = +new Date()
      
      // 判斷上次觸發的時間和本次觸發的時間差是否小於時間間隔的閾值
      if (now - last >= interval) {
      // 若是時間間隔大於咱們設定的時間間隔閾值，則執行回調
          last = now;
          fn.apply(context, args);
      }
    }
}

// 用throttle來包裝scroll的回調
const better_scroll = throttle(() => console.log('觸發了滾動事件'), 1000)

document.addEventListener('scroll', better_scroll)

複製代碼

Debounce： 最後一我的說了算

防抖的中心思想在於：我會等你到底。在某段時間內，無論你觸發了多少次回調，我都只認最後一次。

繼續講司機開車的故事。此次的司機比較有耐心。第一個乘客上車後，司機開始計時（好比說十分鐘）。十分鐘以內，若是又上來了一個乘客，司機會把計時器清零，從新開始等另外一個十分鐘（延遲了等待）。直到有這麼一位乘客，從他上車開始，後續十分鐘都沒有新乘客上車，司機會認爲確實沒有人須要搭這趟車了，纔會把車開走。

咱們對比 throttle 來理解 debounce：在throttle的邏輯裏，「第一我的說了算」，它只爲第一個乘客計時，時間到了就執行回調。而 debounce 認爲，「最後一我的說了算」，debounce 會爲每個新乘客設定新的定時器。

咱們基於上面的理解，一塊兒來寫一個 debounce：

// fn是咱們須要包裝的事件回調, delay是每次推遲執行的等待時間
function debounce(fn, delay) {
  // 定時器
  let timer = null
  
  // 將debounce處理結果看成函數返回
  return function () {
    // 保留調用時的this上下文
    let context = this
    // 保留調用時傳入的參數
    let args = arguments

    // 每次事件被觸發時，都去清除以前的舊定時器
    if(timer) {
        clearTimeout(timer)
    }
    // 設立新定時器
    timer = setTimeout(function () {
      fn.apply(context, args)
    }, delay)
  }
}

// 用debounce來包裝scroll的回調
const better_scroll = debounce(() => console.log('觸發了滾動事件'), 1000)

document.addEventListener('scroll', better_scroll)

複製代碼

用 Throttle 來優化 Debounce

debounce 的問題在於它「太有耐心了」。試想，若是用戶的操做十分頻繁——他每次都不等 debounce 設置的 delay 時間結束就進行下一次操做，因而每次 debounce 都爲該用戶從新生成定時器，回調函數被延遲了不可勝數次。頻繁的延遲會致使用戶遲遲得不到響應，用戶一樣會產生「這個頁面卡死了」的觀感。

爲了不弄巧成拙，咱們須要借力 throttle 的思想，打造一個「有底線」的 debounce——等你能夠，但我有個人原則：delay 時間內，我能夠爲你從新生成定時器；但只要delay的時間到了，我必需要給用戶一個響應。這個 throttle 與 debounce 「合體」思路，已經被不少成熟的前端庫應用到了它們的增強版 throttle 函數的實現中：

// fn是咱們須要包裝的事件回調, delay是時間間隔的閾值
function throttle(fn, delay) {
  // last爲上一次觸發回調的時間, timer是定時器
  let last = 0, timer = null
  // 將throttle處理結果看成函數返回
  
  return function () { 
    // 保留調用時的this上下文
    let context = this
    // 保留調用時傳入的參數
    let args = arguments
    // 記錄本次觸發回調的時間
    let now = +new Date()
    
    // 判斷上次觸發的時間和本次觸發的時間差是否小於時間間隔的閾值
    if (now - last < delay) {
    // 若是時間間隔小於咱們設定的時間間隔閾值，則爲本次觸發操做設立一個新的定時器
       clearTimeout(timer)
       timer = setTimeout(function () {
          last = now
          fn.apply(context, args)
        }, delay)
    } else {
        // 若是時間間隔超出了咱們設定的時間間隔閾值，那就不等了，不管如何要反饋給用戶一次響應
        last = now
        fn.apply(context, args)
    }
  }
}

// 用新的throttle包裝scroll的回調
const better_scroll = throttle(() => console.log('觸發了滾動事件'), 1000)

document.addEventListener('scroll', better_scroll)

複製代碼

小結

throttle 和 debounce 是咱們平常開發中的經常使用優質代碼片斷，更是前端面試中不可不知的高頻考點。「看懂了代碼」、「理解了過程」在本節都是不夠的，重要的是寫到本身的項目裏去，親自體驗節流和防抖帶來的性能提高。

有用請點贊哦