Debounce，Throttle概念及應用

12-10

在頁面上監聽諸如`scroll`（頁面滾動），`mousemove`（滑鼠移動），`keydown`， `keyup`， `keypress`（按下鍵盤）等等一系列事件的時候，我們並不希望頻繁的觸發這類監聽，尤其當請求非常消耗資源時，這種操作會導致伺服器性能急劇下降。

比如EduSoho中選擇課程老師的功能，只要輸入字元就能顯示出匹配的所有用戶名。簡單的`keyup`事件，可能會導致每輸入一個字元，就觸發一次請求，當輸入【王老師】的時候整整發送了10個AJAX請求。如下圖所示：

我們需要降低這種無效的請求。這時，debounce 和 throttle 就派上用場了。

Debounce

DOM 事件里的 debounce 概念其實是從機械開關和繼電器的「去彈跳」（debounce）衍生出來的，基本思路就是把多個信號合併為一個信號。

在JavaScript中，Debounce函數所做的事情就是，強制一個函數在某個連續時間段內只執行一次，哪怕它本來會被調用多次。我們希望在用戶停止某個操作一段時間之後才執行相應的監聽函數，而不是在用戶操作的過程當中，瀏覽器觸發多少次事件，就執行多少次監聽函數。

比如，在某個3s的時間段內連續地移動了滑鼠，瀏覽器可能會觸發幾十（甚至幾百）個mousemove事件，不使用Debounce的話，監聽函數就要執行這麼多次；如果對監聽函數使用 100ms的「去彈跳，那麼瀏覽器只會執行一次這個監聽函數，而且是在第 3.1s 的時候執行的。

現在，我們來實現一個Debounce 函數

頁面滾動到元素可見位置的例子

Throttle

Throttle 的概念理解起來更容易，就是固定函數執行的速率，即所謂的「節流」。正常情況下，`mousemove` 的監聽函數可能會每 20ms（假設）執行一次，如果設置200ms的「節流」，那麼它就會每200ms執行一次。比如在 1s的時間段內，正常的監聽函數可能會執行50（1000/20）次，「節流」 200ms後則會執行5（1000/200）次。

改變窗口大小的例子

總結

Debounce其實就是把觸發非常頻繁的事件合併成一次延遲執行，合理使用可以減少伺服器壓力，加快瀏覽器的渲染速度。

Throttle設置一個閥值，在閥值內，把觸發的事件合併成一次執行；當到達閥值，必定執行一次事件。

可以訪問這個demo來查看Debounce、Throttle和默認情況的事件監聽效果。

Demo網址http://demo.nimius.net/debounce_throttle/

EduSoho是教育機構轉型在線教育的解決方案，我們為教育機構提供包含教學、營銷和管理等完整功能的網校系統、網校搭建及維護的一站式技術服務，高性價比的錄播和直播方案，以及幫助網校成長的運營服務，讓教育機構可以零門檻搭建和運營獨立網校，成功轉型在線教育。

歡迎關注【EduSoho網校系統】、【老魏說】回復ES獲得建校大禮包。