概念:延时一段时间执行某个动作,当在这段时间内再被触发时,清除掉之前的计时重试计时。
eg. 输入框搜索,就应该用防抖,当我连续不断输入时,不会发送请求;当我一段时间内不输入了,才会发送一次请求;如果小于这段时间继续输入的话,时间会重新计算,也不会发送请。
function debounce (fn, time=300) {
let timer // 缓存一个定时器对象
return function (...args) {
// 当触发时定时器对象存在,则清除重新计时
timer && clearTimeout(timer)
timer = setTimeout(() => {
fn.apply(this, args) // doSomething
timer = null
}, time)
}
}
适用场景:
- 按钮提交场景:防止多次提交按钮,只执行最后提交的一次
- 服务端验证场景:表单验证需要服务端配合,只执行一段连续的输入事件的最后一次,还有搜索联想词功能类似