一、函數防抖(debounce)
概念： 在事件被觸發n秒後再執行回調，如果在這n秒內又被觸發，則重新計時。
應用場景：
- 給按鈕加函數防抖防止表單多次提交。
- 對於輸入框連續輸入進行AJAX驗證時，用函數防抖能有效減少請求次數。
- 判斷 scroll 是否滑到底部， 滾動事件 + 函數防抖
適合多次事件，一次響應的情況
二、代碼實現
思路：第一次調用函數，創建一個定時器，在指定的時間間隔之後運行代碼。當第二次及以後調用該函數時，會判斷上一個定時器是否存在，如果存在，就會清除前一次的定時器，並設置一個新的定時器，重新開始計時。如果前一個定時器已經執行過了，定時器已經不存在了，也會開啓一個新的定時器。
//生成防抖函數
debounce(func, delay) {
let timer = null;
return function (...args) {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args)
}, delay)
}
}
- 將準備進行防抖處理的函數傳入到debounce函數中，生成一個新的函數，也可以傳遞參數
- 之後在調用非常頻繁的時候，就使用新生成的函數.
- 如果下一次調用執行來的非常快，那麼會將上一次的定時器取消掉而重新計時。所以新生成的函數，並不會非常頻繁的調用。