函數防抖 和 函數節流

函數防抖(debounce)

---

概念
函數防抖 就是指 觸發事件后 在 n 秒內 函數只能執行一次，如果在 n 秒內又觸發了事件，則會重新計算函數執行時間。
簡單的說，當一個動作連續觸發，則只執行最后一次。

生活中的實例： 如果有人進電梯（觸發事件），那電梯將在10秒鐘后出發（執行事件監聽器），這時如果又有人進電梯了（在10秒內再次觸發該事件），我們又得等10秒再出發（重新計時）。

坐公交，司機需要等最后一個人進入才能關門。每次進入一個人，司機就會多等待幾秒再關門

將一個彈簧按下，繼續加壓，繼續按下，只會在最后放手的一瞬反彈。即我們希望函數只會調用一次，即使在這之前反復調用它，最終也只會調用一次而已。

函數防抖 應用場景

• 給按鈕加函數防抖防止表單多次提交。
• 對于輸入框連續輸入進行AJAX驗證時，用函數防抖能有效減少請求次數。
• 判斷scroll是否滑到底部，滾動事件+函數防抖
• 手機號、郵箱驗證輸入檢測
• 窗口大小Resize。只需窗口調整完成后，計算窗口大小。防止重復渲染

總的來說，適合多次事件一次響應的情況，也就是連續的事件，只需觸發一次回調。

函數節流（throttle）

---

概念
限制一個函數在一定時間內只能執行一次。
也就是 規定一個單位時間，在這個單位時間內，只能有一次觸發事件的回調函數執行，如果在同一個單位時間內某事件被觸發多次，只有一次能生效。

實例：
一個水龍頭在滴水，可能一次性會滴很多滴，但是我們只希望它每隔 500ms 滴一滴水，保持這個頻率。即我們希望函數在以一個可以接受的頻率重復調用。

我們分析上圖你會發現：
豎線的疏密代表事件執行的頻繁程度。可以看到，正常情況下，豎線非常密集，函數執行的很頻繁。而debounce（函數防抖）則很稀疏，只有當鼠標停止移動時才會執行一次。throttle（函數節流）分布的較為均已，每過一段時間就會執行一次。

函數節流 應用場景

間隔一段時間執行一次回調的場景有：

• 滾動加載，加載更多或滾到底部監聽
• 谷歌搜索框，搜索聯想功能
• 高頻點擊提交，表單重復提交
• 游戲中的刷新率
• DOM元素拖拽
• Canvas畫筆功能

總的來說，適合大量事件按時間做平均分配觸發

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的函数防抖 和 函数节流的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。