标签：防抖 函数 timer handleScroll needExecute 执行 真正

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

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

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

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

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。