其他分享
首页 > 其他分享> > 真正的防抖函数怎么写?

真正的防抖函数怎么写?

作者:互联网

记录一个简单的防抖函数,主要是面试过一些人的防抖实现,感觉都提不到最后一点

看过很多人写的防抖,但是都没有记录最后状态,那真正的防抖应该怎么实现呢?

假设有一个滚动条滚动然后执行某个事情的需求

我们需要根据滚动条的高度来执行某些事情

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 改为传入的参数,这样保留上次传递的参数。

标签:防抖,函数,timer,handleScroll,needExecute,执行,真正
来源: https://blog.csdn.net/weixin_42335036/article/details/122585847