节流与防抖

节流与防抖

1.我们先了解为什么要节流和防抖

我们给一个inpu输入框绑定一个oninput事件，此时我们输入“前端开发”四个字，我们

观察以下后台打印

我们仅仅输入四个字，就触发了几十次事件，

如果说我每一次输入都和后台进行数据交互，那么将会很影响计算机的性能。

因此我们需要让请求的次数大大减少，因此我们需要利用防抖来减少用户操作过多，与后台数据交互的次数。

接下来我们来介绍防抖

防抖：用户触发事件过于频繁，只要最后一次事件的操作。

也就是说，用户频繁的操作，我们只取最后一次操作。

比如

同样我们输入‘前端开发’四个字，如果我们输入的时间间隔小于0.5秒，就不触发oninput事件，

如果我们输入的时间间隔大于0.5秒，那么我们就触发oninput。

这样我们就大大减少了请求的次数。

我们可以通过闭包来优化防抖代码

使用闭包可以不用产生全局变量t，并且可以让防抖代码与业务代码隔离；

 <body>
    <input type="text" />
    <script>
      window.onload = function () {
        let ls = document.getElementsByTagName("input")[0];
        console.log(ls);
        ls.oninput = dou(function () {
          console.log("防抖");
        }, 500);
        function dou(fn, time) {
          let t;
          return function () {
            if (t != null) {
              clearTimeout(t);
            }
            t = setTimeout(() => {
              fn.call(this);//通过call改变this指向
            }, time);
          };
        }
      };
    </script>
  </body>

3.节流
什么是节流？

节流：控制高频事件的执行次数（事件频繁触发时，每隔多少秒触发一次）

防抖是只执行最后一次，而节流是减少执行次数。

我们先做一个滚动事件，只要我们让滚动条滚动就会打印123，如下图，我们只是滚动了一下，

就触发了一百多次，如果是和后台服务器产生数据交互，同样对性能消耗是比较大的。

因此我们需要节流。

window.onscroll = jieliu(function () {
          console.log("节流");
        }, 1000);
        function jieliu(fn, settime) {
          let t = false;
          return function () {
            if (t == false) {
              t = true;
              setTimeout(() => {
                fn();
                t = false;
              }, settime);
            }
          };
        }

版权声明：本文为CSDN博主「秃头小宝贝@」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_45974259/article/details/123271263

posted @ 2022-11-18 15:16  ＆漠。  阅读(26)  评论(0)    收藏  举报