一、函式防抖(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函式中，生成一個新的函式，也可以傳遞引數
- 之后在呼叫非常頻繁的時候，就使用新生成的函式.
- 如果下一次呼叫執行來的非常快，那么會將上一次的定時器取消掉而重新計時，所以新生成的函式，并不會非常頻繁的呼叫，
三、參考資料
JS函式節流和函式防抖問題分析
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/251790.html
標籤：其他
下一篇：資料可視化API之軌跡圖實作