按钮防多次点击

最新推荐文章于 2024-12-18 07:00:00 发布

转载最新推荐文章于 2024-12-18 07:00:00 发布 · 468 阅读

文章标签：

#前端技巧

前端专栏收录该内容

7 篇文章

订阅专栏

本文探讨了在前端开发中如何使用防抖(debounce)和节流(throttle)技术来优化用户体验，特别是在处理滚动事件和按钮点击时。通过具体代码示例，详细解释了这两种方法的实现原理和应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

你是否在日常开发中遇到一个问题，在滚动事件中需要做个复杂计算或者实现一个按钮的防二次点击操作。
PS：防抖和节流的作用都是防止函数多次调用。区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于wait，防抖的情况下只会调用一次，而节流的情况会每隔一定时间（参数wait）调用函数。

// func是用户传入需要防抖的函数
// wait是等待时间
const debounce = (func, wait = 50) => {
  // 缓存一个定时器id
  let timer = 0
  // 这里返回的函数是每次用户实际调用的防抖函数
  // 如果已经设定过定时器了就清空上一次的定时器
  // 开始一个新的定时器，延迟执行用户传入的方法
  return function(...args) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(this, args)
    }, wait)
  }
}
// 不难看出如果用户调用该函数的间隔小于wait的情况下，上一次的时间还未到就被清除了，并不会执行函数