节流和防抖

最新推荐文章于 2025-05-28 19:34:53 发布

不是山谷.:.

最新推荐文章于 2025-05-28 19:34:53 发布

阅读量108

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/qq_67118860/article/details/126130526

版权

本文深入探讨了JavaScript中的事件处理优化技术，包括节流和防抖的实现原理。通过示例代码，展示了如何使用这两种技术来提高性能，避免频繁触发事件导致的性能问题。节流用于限制事件在一定时间内只能触发一次，而防抖则确保事件在最后一次触发后的一段时间内不再重复执行。理解并掌握这些技巧对于优化前端应用性能至关重要。

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

<script>
  // 节流，如果连续触发事件，则每隔一段时间才能触发一次事件
  let box = document.querySelector('div')

  box.addEventListener('click', throttle(1000))
    //定义一个节流阀 类似于开关
  function throttle(data) {
    let timer = null;
    return add => {
      if (!timer) {
        clearTimeout(timer);
        timer = setTimeout(() => {
          console.log(11111111);
          timer = null;
        }, data);
      }
    }
  }


  // 防抖 只在最后一次事件停止后触发
  function throttle(data) {
    let timer = null;
    return add => {
      clearTimeout(timer);
      timer = setTimeout(() => {
        console.log(11111111);
      }, data);
    }
  }
</script>