记录一个简单的防抖函数,主要是面试过一些人的防抖实现,感觉都提不到最后一点
看过很多人写的防抖,但是都没有记录最后状态,那真正的防抖应该怎么实现呢?
假设有一个滚动条滚动然后执行某个事情的需求
我们需要根据滚动条的高度来执行某些事情
let timer = null
let needExecute = false
const handleScroll = () => {
needExecute = true
if (timer) return
timer = setTimeout(() => {
needExecute = false
if (document.scrollingElement.scrollTop > 20) {
// doSomething
}
timer = null
if (needExecute) handleScroll()
}, 50)
}
window.addEventListener("scroll", handleScroll)
这个函数的意义在于,每次如果有 timer 会不执行函数,而且在时间函数执行完毕的时候,检查是否需要再次执行一次,如果需要,则再次调用自己,来执行最后一个保留的位置
如果需要传递参数,就把 needExecute 改为传入的参数,这样保留上次传递的参数。