防抖和节流

前端小马

已于 2023-10-25 16:21:50 修改

阅读量1.5k

点赞数

分类专栏：前端笔记文章标签： javascript 前端

于 2022-12-05 22:04:25 首次发布

本文链接：https://blog.csdn.net/qq_56088882/article/details/128188832

版权

前端笔记专栏收录该内容

44 篇文章 0 订阅

订阅专栏

使用场景：

防抖在连续的事件，只需触发一次回调的场景有：

搜索框搜索输入。只需用户最后一次输入完，再发送请求。
窗口大小resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。
登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖。
节流在间隔一段时间执行一次回调的场景有：

滚动加载，加载更多或滚到底部监听
搜索框，搜索联想功能

一:函数防抖：

概念：当调用动作过n秒后，才会执行该动作，若在这n秒内又调用此动作则将重新计算执行时间(一定时间内，只会执行最后一次任务)

例如：王者荣耀中的英雄回城，点击回城后将在五秒后回城，如果在这五秒内我们再次点击回城就会打断上一次的回城重新执行一个新的回城任务要重新等待五秒才能回城 (被打断就重新执行)

实现方式：每次触发事件时设置一个延迟调用方法，并且取消之前的延时调用方法

思路：

1.事件函数执行, 先创建个定时器

2.把逻辑代码放到定时器中

3.当函数再次触发, 清除定时器

4.创建一个新定时器即可

例如：

  <body>
    <button>点我防抖</button>
    <script>
      let button = document.querySelector("button");
      let timeout = null; //创建一个标记用来存放定时器的返回值
      button.onclick = function () {
        if (timeout) clearTimeout(timeout);//每当用户输入的时候把前一个setTimeout清理掉
        timeout = setTimeout(()=> {  //创建一个新的 setTimeout
          console.log("防抖");
        }, 1000);
      };
    </script>
  </body>

效果：

为了方便使用，把他封装成防抖函数：

  <body>
    <button>点我防抖</button>
    <script>
      let button = document.querySelector("button");
      button.onclick = debounce(function () {  //点击事件触发防抖函数
        console.log(this);
      }, 1000);
      封装的防抖函数:
      function debounce(fn, delay) {
        let timeout = null;
        return function () {      //真正的事件处理函数，this:事件的触发者
          if (timeout) clearTimeout(timeout);
          timeout = setTimeout(() => {
            fn.call(this);       //改变this指向
          }, delay);
        };
      }
    </script>
  </body>

效果：

二：函数节流：

概念：每次触发事件时，如果当前有等待执行的延时函数，则直接return（指定时间间隔内只会执行一次任务。）

例如：王者荣耀英雄的技能CD，指定时间内只能用一次，多次点击无效果

实现思路：

1. 事件函数执行, 先判断有无定时器, 忧则直接return

2. 没有就把逻辑代码放到定时器中

3. 定时器执行后, 置空定时器变量

4. 下次事件函数执行时, 再创建一个新定时器即可

例如：

  <body>
    <button>点我</button>
    <script>
      let button = document.querySelector("button");
      let timeout = null;
      button.onclick = function () {
        if (timeout) return;
        timeout = setTimeout(function () {
          console.log("节流");
          timeout = null;
        }, 1000);
      };
    </script>
  </body>

效果(不管点多快都是一秒输出一次):

为了方便使用，把他封装成防抖函数：

<body>
    <button>点我节流</button>
    <script>
      let button = document.querySelector("button");
      let timeout = null;
      //点击事件触发节流函数
      button.onclick = throttle(function () {
        console.log("节流");
      }, 1000);
      //封装公共节流函数：
      function throttle(fn, delay) {
        return function () {
          //真正的事件处理函数 this:事件的触发者
          if (timeout) return;
          timeout = setTimeout(()=> {
            fn.call(this);
            timeout = null; //置空，让事件再次触发时，重新创建一个定时器
          }, delay);
        };
      }
    </script>
  </body>