概念描述
- 高阶函数，传入一个函数，返回一个函数。
- 在 delay 时间内，前后两次点击，阻止前一次点击，延迟后一次点击，重复 n 个两次，直到最后一次点击，延迟 delay 时间最后一次的点击。
- 回调函数需要手动绑定 this 以及传参。
代码实现
/**
* @description: debounce - 防抖
* 1、高阶函数，传入一个函数，返回一个函数。
* 2、在 delay 时间内，前后两次点击，阻止前一次点击，延迟后一次点击，重复 n 个两次，直到最后一次点击，延迟 delay 最后一次的点击。
* 3、回调函数需要手动绑定 this 以及传参。
* @author: huen2015
*/
function debounce(fn: Function, delay: number = 300): EventListenerOrEventListenerObject | any {
let timer: any = null
return function (this: any, ...args: any[]) {
if (timer) {
clearTimeout(timer)
timer = null
}
timer = setTimeout(() => {
fn.apply(this, args)
}, delay)
}
}
const debounceDom = document.querySelector('#debounce')
if (debounceDom) {
// Event - UIEvent - MouseEvent - PointerEvent
debounceDom.addEventListener('click', debounce(function (this: any, e: PointerEvent) {
console.log('debounce - 防抖')
console.log('this', this)
console.log('e', e)
}))
}
应用场景
-
click、scroll 等事件防止多次点击
-
input 输入框防止多次输入
