防抖函数,顾名思义,就是防止抖动,其核心原理就是在指定时间内,将频繁触发的事件只执行一次。也可以认为将多次执行的事件,变为只执行最后一次。
有了这个概念,我们就可以写个简化版的防抖函数,直接上代码
//func为需要防抖的函数
//wait 为等待时间
const debounce = (func, wait = 50)=>{
let timer = null;
//这里使用闭包,来保存上一次timer的状态,否则每次都会赋值为null
//如果已经设置了定时器,就清空上一次的定时器,重新设置新的定时器,执行用户的方法
return function(...args){
if(timer){
clearTimeout(timer)
}
timer = setTimeout(()=>{
func.apply(this,args)
},wait)
}
}