002-JS防抖与节流

sunrise2580

已于 2024-09-22 11:43:56 修改

阅读量267

点赞数 5

文章标签：前端 javascript 开发语言

于 2024-09-17 18:40:20 首次发布

本文链接：https://blog.csdn.net/2301_78193510/article/details/142317239

版权

概念

防抖：在一定时间内，持续触发某一个事件，只有在停止触发一段时间（n秒）后，事件才会被真正执行。如果在n秒内再次触发事件，则重新计时n秒后才会真正执行事件。

节流：

防抖（Debounce）和节流（Throttle）是前端开发中常用的两种性能优化手段，主要用于控制某个函数在一定时间内触发的次数，以减少触发频率，提高性能并避免资源浪费。

区别

防抖: 高频触发事件n秒后，函数只会执行一次，如果n秒内再次触发，则重新计时

节流: 高频触发事件，但是在n秒内只会执行一次，在这n秒内，无论触发多少次，只会执行一次

应用

防抖：

搜索框输入实时搜索：当用户在搜索框中快速输入时，用防抖来节约请求资源，在输入停止一段时间（例如 500 毫秒）后再进行搜索。
窗口大小调整：在响应窗口大小变化的事件中，防抖可以避免在用户调整窗口大小时频繁触发重新布局或重新计算样式的操作。
文本编辑自动保存：在用户编辑文本时，不是每次修改都立即保存，而是在停止编辑一段时间后自动保存，减少保存操作的次数。

节流：

滚动加载数据：当页面滚动到底部时加载更多数据，使用节流可以控制加载的频率，避免过多的计算和渲染操作，提高页面的性能和流畅度。
鼠标移动事件：例如在一个需要根据鼠标移动实时更新某些元素位置或状态的场景中，节流可以限制更新的频率，保证性能。
高频点击操作：如点赞按钮，防止用户在短时间内快速多次点击而导致重复的操作被执行。

实现

防抖：

 <body>
    <button class="btn1">普通按钮</button>
    <button class="btn2">防抖按钮</button>
    <script>
      document.querySelector(".btn1").addEventListener("click", () => {
        console.log("发送请求");
      });

      document.querySelector(".btn2").addEventListener(
        "click",
        debounce(() => {
          console.log("发送防抖请求");
        }, 1000)
      );

      function debounce(fn, time) {
        let timer = null;
        return () => {
          if (timer) clearTimeout(timer);
          timer = setTimeout(fn, time);
        };
      }
    </script>
  </body>

这里有两个按钮：

btn1：一个普通的按钮，点击后会直接触发 click 事件。

btn2：一个使用防抖技术的按钮。

分别高频点击两个按钮：

btn1（普通按钮）：每次点击都会立即在控制台输出 "发送请求"，没有任何延迟或限制。
btn2（防抖按钮）：点击按钮会延迟执行事件处理函数。如果在防抖时间内再次点击按钮，之前的定时器会被清除，事件处理函数只会在最后一次点击后的 1000 毫秒后执行一次。

节流：

<body>
    <button class="btn1">普通按钮</button>
    <button class="btn2">节流按钮</button>
    <script>
      document.querySelector(".btn1").addEventListener("click", () => {
        console.log("发送请求");
      });

      document.querySelector(".btn2").addEventListener(
        "click",
        throttle(() => {
          console.log("发送节流请求");
        }, 1000)
      );

      function throttle(fn, time) {
        let start = Date.now();
        return () => {
          let end = Date.now();
          if (end - start > time) {
            fn();
            start = Date.now();
          }
        };
      }
    </script>
  </body>

这里有两个按钮：

btn1：一个普通的按钮，点击后会直接触发 click 事件。

btn2：一个使用节流技术的按钮。

分别高频点击两个按钮：