概念:延時一段時間執(zhí)行某個動作,當在這段時間內(nèi)再被觸發(fā)時,清除掉之前的計時重試計時。
eg. 輸入框搜索,就應(yīng)該用防抖,當我連續(xù)不斷輸入時,不會發(fā)送請求;當我一段時間內(nèi)不輸入了,才會發(fā)送一次請求;如果小于這段時間繼續(xù)輸入的話,時間會重新計算,也不會發(fā)送請。
function debounce (fn, time=300) {
let timer // 緩存一個定時器對象
return function (...args) {
// 當觸發(fā)時定時器對象存在,則清除重新計時
timer && clearTimeout(timer)
timer = setTimeout(() => {
fn.apply(this, args) // doSomething
timer = null
}, time)
}
}
適用場景:
- 按鈕提交場景:防止多次提交按鈕,只執(zhí)行最后提交的一次
- 服務(wù)端驗證場景:表單驗證需要服務(wù)端配合,只執(zhí)行一段連續(xù)的輸入事件的最后一次,還有搜索聯(lián)想詞功能類似