防抖和节流详细解答

最新推荐文章于 2024-07-14 18:10:31 发布

春緋

最新推荐文章于 2024-07-14 18:10:31 发布

阅读量608

点赞数 21

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

本文链接：https://blog.csdn.net/2302_80391964/article/details/139045233

版权

一、防抖和节流的定义

防抖和节流本质上是优化高频率执行代码的一种手段，如：浏览器的 resize scroll keypress mousemove 等事件在发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能为了优化体验，需要对这类事件进行调用次数的限制，对此我们就可以采用throttle(防抖)和deboumnce(节流)的方式来减少调用频率

节流：n秒内只运行一次，若在n 秒内重复触发，只有一次生效
防抖：n秒后在执行该事件，若在n秒内被重复触发，则重新计时。用户高频事件完了，再进行事件操作

二、防抖应用

搜索框搜索输入。只需用户最后一次输入完，再发送请求
手机号、邮箱验证输入检测onchange /oninput事件
窗口大小计算。只需窗口调整完成后，计算窗口大小。防止重复渲染

三、节流应用

懒加载、滚动加载、加载更多或监听滚动条位置
防止高频点击提交，防止表单重复提交

四、防抖原因

有的操作是高频触发的，但是其实触发一次就好了，
比如我们短时间内多次缩放页面，那么我们不应该每次缩放都去执行操作，应该只做一次就好。
再比如说监听输入框的输入，不应该每次都去触发监听，应该是用户完成一段输入后在进行触发。

五、防抖代码实现

思路：事件触发后开启一个定时器，如果事件在这个定时器限定的时间内再次触发，则清除定时器，在写一个定时器，定时时间到则触发。

  <body>
    <input type="text" id="input" />
    <script>
      /* 防抖 */
      function debounce(fn, delay) {
        let timer = null;
        return function () {
          clearTimeout(timer);
          timer = setTimeout(() => {
            fn.apply(this, arguments);
          }, delay);
        };
      }
      /* input事件触发执行的逻辑 */
      function trigger(e) {
        console.log(e.target.value);
      }
      const inputDom = document.getElementById("input");
      // 不加防抖
      // inputDom.oninput = trigger;
      // 加防抖
      inputDom.oninput = debounce(trigger, 200);
    </script>
  </body>

六、节流原因

节流就是减少流量，将频繁触发的事件减少，并每隔一段时间执行。即，控制事件触发的频率

七、节流代码实现

设计：我们可以设计一种类似控制阀门一样定期开放的函数，事件触发时让函数执行一次，然后关闭这个阀门，过了一段时间后再将这个阀门打开，再次触发事件。

  <body>
    <button id="btn">点我</button>
    <script>
      /* 防抖 */
      function throttle(fn, delay) {
        let valid = true;
        return function () {
          /* 一开始就触发---后续每隔delay时间内只触发一次 */
          if (valid) {
            valid = false; // 关闭阀门
            // 如果阀门已经打开，就继续往下
            setTimeout(() => {
              fn.apply(this, arguments); // 定时器结束后执行
              valid = true; // 执行完成后打开阀门
            }, delay);
          }
        };
      }
      /* 点击事件触发执行的逻辑 */
      function trigger(e) {
        console.log("按钮被点击了");
      }
      const btnDom = document.getElementById("btn");
      // 不加节流
      // btnDom.addEventListener("click", trigger);
      // 加节流的
      btnDom.addEventListener("click", throttle(trigger, 1000));
    </script>
  </body>

刚开始valid为true，然后将valid重置为false,进入了定时器
在定时器执行完毕后之后，才会将valid重置为true
valid为true之后，之后的点击才会生效
在定时器的时间期限内，valid还没有重置为true，
就实现了在N秒内多次点击只会执行一次的效果

八、项目总结

在本周项目中，我发现一个非常细节的点。在使用th:classappend时，添加的类必须要写在标签原本类的后面，这样子他才能单个覆盖以前的效果。而dom.classlist就可以不用。

春緋

关注

21
点赞
踩
16

收藏

觉得还不错? 一键收藏
1
评论
防抖和节流详细解答

防抖和节流本质上是优化高频率执行代码的一种手段，如：浏览器的 resize scroll keypress mousemove 等事件在发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能为了优化体验，需要对这类事件进行调用次数的限制，对此我们就可以采用throttle(防抖)和deboumnce(节流)的方式来减少调用频率节流：n秒内只运行一次，若在n 秒内重复触发，只有一次生效防抖：n秒后在执行该事件，若在n秒内被重复触发，则重新计时。用户高频事件完了，再进行事件操作。
复制链接

扫一扫