彻底理解防抖和节流

你会发光哎u2024-09-04 21:20

目录

防抖（debounce）

理解

防抖的核心思想是：在某段时间内，如果一个函数连续多次触发，它只会在最后一次触发之后的设定时间内执行一次

  • 当事件触发时，相应的函数并不会立即触发，而是会等待一定的时间

  • 当事件密集触发时，函数的触发会被频繁的推迟

  • 只有等待了一段时间也没有事件触发，才会真正的执行响应函数

应用场景

如果希望某个函数在短时间内只执行一次，而不是每次事件触发时都执行，适用于那些只需要在最后一次操作后执行的场景，就可以使用防抖

  • 输入框中频繁的输入内容，搜索或者提交信息：用户在输入框中输入关键词时，如果每输入一个字符就立即发送请求，会导致大量的无效请求，使用防抖可以让请求只在用户停止输入后的设定时间内发送

  • 频繁的点击按钮，触发某个事件：避免用户快速多次点击按钮时触发多次事件，防抖可以让事件只在最后一次点击后执行

  • 监听浏览器滚动事件，完成某些特定操作

  • 用户缩放浏览器的resize事件：在浏览器窗口大小调整时，不希望每次调整都触发复杂的重新布局逻辑，可以用防抖来优化

Underscore库

事实上我们可以通过一些第三方库来实现防抖操作：lodash和underscore

  • 可以理解成lodash是underscore的升级版，它更重量级，功能也更多

  • 目前underscore还在维护，lodash已经很久没有更新了

  • Underscore的官网： https://underscorejs.org/

  • Underscore的安装有很多种方式：

    • 下载Underscore，本地引入
    • 通过CDN直接引入
    • 通过包管理工具（npm）管理安装

  • 使用：

    js 复制代码 
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" />
    <script src="https://cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-umd-min.js"></script>
    <script>
      const inputEl = document.querySelector("input");
      let counter = 0;
      const inputChange = function () {
        console.log("发送请求", counter++);
      };
      inputEl.oninput = _.debounce(inputChange, 1000);
    </script>
  </body>
</html>

手写

基本实现

实现当频繁持续执行函数时，只在停止输入时间到达延迟时间时执行

js 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" />
    <button class="cancel">取消</button>
    <script>
      const inputEl = document.querySelector("input");
      function myDebounce(fn, delay) {
        // 用于记录上一次事件触发的timer
        let timer = null;

        // 触发事件时执行的函数
        const _debounce = function (...args) {
          if (timer) clearTimeout(timer);
          timer = setTimeout(() => {
            fn();
            timer = null;
          }, delay);
        };
        return _debounce; // 加 _ 代表是这个函数私有的变量
      }

      const inputChange = function () {
        console.log("发送网络请求");
      };

      inputEl.oninput = myDebounce(inputChange, 1000);
    </script>
  </body>
</html>

优化实现

  • 优化参数和this指向 ：让传入防抖函数中的函数能正确的打印参数和this

  • 优化取消操作：增加并返回取消函数，使用户可以再点击按钮或返回上一页时可以取消

  • 优化立即执行效果：接收新的参数判断是否让其第一次的执行不必延迟

  • 优化返回值：如果传入防抖的函数有返回值，那么防抖后的也应该有返回值，可以通过promise方式或者回调参数的方式

js 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" />
    <button class="cancel">取消</button>
    <script>
      const inputEl = document.querySelector("input");
      const cancelEl = document.querySelector(".cancel");
      function myDebounce(fn, delay, immediate = true) {
        // 用于记录上一次事件触发的timer
        let timer = null;
        let isExec = true;

        // 触发事件时执行的函数
        const _debounce = function (...args) {
          // 返回值
          return new Promise((resolve, reject) => {
            try {
              let res = undefined;
              // 是否第一次立即执行
              if (isExec && immediate) {
                res = fn.apply(this, args);
                resolve(res);
                isExec = false;
                return;
              }
              if (timer) clearTimeout(timer);
              timer = setTimeout(() => {
                // 优化this和参数
                res = fn.apply(this, args);
                resolve(res);
                timer = null;
              }, delay);
            } catch (err) {
              reject(err);
            }
          });
        };

        // 取消函数
        _debounce.cancel = () => {
          if (timer) clearTimeout(timer);
          timer = null;
          isExec = true;
          console.log("取消成功");
        };
        return _debounce; // 加 _ 代表是这个函数私有的变量
      }

      const inputChange = function (event) {
        console.log("发送网络请求", this, event);
        return "inputChange";
      };

      const debounceFn = myDebounce(inputChange, 1000);
      inputEl.oninput = debounceFn;
      cancelEl.onclick = debounceFn.cancel;

      // debounceFn().then((res) => {
      //    console.log(res);
      // });
    </script>
  </body>
</html>

节流（throttle）

理解

节流的核心思想是：在一定时间间隔内，函数最多执行一次，即使在这个时间间隔内事件被多次触发，函数也只会在时间间隔结束后执行

  • 节流的目的是确保在一定时间间隔内最多执行一次目标函数，无论事件触发频率多高，目标函数都会按照设定的时间间隔执行

  • 当事件触发时，会执行这个事件的响应函数

  • 如果这个事件会被频繁触发，那么节流函数会按照一定的频率来执行函数

  • 不管在这个中间有多少次触发这个事件，执行函数的频繁总是固定的

应用场景

适用于那些需要持续执行的场景，但需要控制执行频率

  • 监听页面的滚动事件：当用户滚动页面时，可能触发大量的滚动事件处理程序，使用节流可以让滚动处理程序在固定时间间隔内执行一次，而不是每次滚动都触发

  • 鼠标移动事件：在浏览器窗口大小变化时，通过节流限制重新布局或其他昂贵操作的频率

  • 用户频繁点击按钮操作：防止用户多次快速点击按钮时导致操作被多次执行。节流可以让操作在一定时间内最多执行一次

  • 游戏中的一些设计

Underscore库

js 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" />
    <script src="https://cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-umd-min.js"></script>
    <script>
      const inputEl = document.querySelector("input");
      let counter = 0;
      const inputChange = function () {
        console.log("发送请求", counter++);
      };
      inputEl.oninput = _.throttle(inputChange, 1000);
    </script>
  </body>
</html>

手写

基本实现

实现不管用户连续输入多少次，都只会以每一秒（用户传入的时间）执行一次的规律执行函数

js 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" />
    <script>
      const inputEl = document.querySelector("input");
      const myThrottle = function (fn, interval) {
        let startTime = 0; // 记录开始时间

        function _throttle() {
          let nowTime = new Date().getTime(); // 记录函数触发时间
          let waitTime = interval - (nowTime - startTime); // 还有多久触发fn
          if (waitTime <= 0) {
            fn();
            startTime = nowTime;
          }
        }
        return _throttle;
      };

      const inputChange = function () {
        console.log("发送网络请求");
      };
      inputEl.oninput = myThrottle(inputChange, 1000);
    </script>
  </body>
</html>

优化实现

  • 优化this和参数绑定 ：让传入防抖函数中的函数能正确的打印参数和this

  • 优化立即执行控制：接收新的参数判断是否让其第一次的立即执行

  • 优化尾部执行控制：最后用户输完后不输了，但到了规定时间也要执行一下函数，我们不能判断哪一次是最后的一次，因为这是用户的行为；我们可以每次都进行记录，但如果用户在这个规定时间内输入了我们就可以取消记录，在规定时间内一直没有输入，我们就认定为最后一次，在规定时间执行一次函数

  • 优化添加取消功能：增加并返回取消函数，使用户可以再点击按钮或返回上一页时可以取消

  • 优化返回值问题：如果传入节流的函数有返回值，那么节流后的也应该有返回值，可以通过promise方式或者回调参数的方式

js 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" />
    <button class="cancel">取消</button>
    <script>
      const inputEl = document.querySelector("input");
      const cancelEl = document.querySelector(".cancel");
      
      const myThrottle = function (
        fn,
        interval,
        immediate = true,
        tailing = true
      ) {
        let startTime = 0; // 记录开始时间
        let timer = null;
        
        const _throttle = function (...args) {
          return new Promise((resolve, reject) => {
            try {
              let nowTime = new Date().getTime(); // 记录函数触发时间
              
              // 判断第一次是否立即执行
              if (startTime === 0 && !immediate) {
                startTime = nowTime;
              }
              
              let waitTime = interval - (nowTime - startTime); // 还有多久触发fn
              if (waitTime <= 0) {
                timer && clearTimeout(timer);
                const res = fn.apply(this, args);
                resolve(res);
                startTime = nowTime;
                timer = null;
                return;
              }
              
              // 判断是否尾部执行
              if (!timer && tailing) {
                timer = setTimeout(() => {
                  const res = fn.apply(this, args);
                  resolve(res);
                  startTime = new Date().getTime();
                  timer = null;
                }, waitTime);
              }
            } catch (err) {
              reject(err);
            }
          });
        }
        
        // 增加取消函数
        _throttle.cancel = function () {
          console.log("取消成功");
          timer && clearTimeout(timer);
          startTime = 0;
          timer = null;
        };
        
        return _throttle;
      };
      
      const inputChange = function (event) {
        console.log("发送网络请求", this.value, event);
        return "inputChange";
      };
      
      const throttleFn = myThrottle(inputChange, 1000);
      inputEl.oninput = throttleFn;
      cancelEl.onclick = throttleFn.cancel;
      
      // throttleFn().then((res) => {
      //   console.log(res);
      // });
    </script>
  </body>
</html>
相关推荐
Kisorge8 分钟前
【C语言】指针数组、数组指针、函数指针、指针函数、函数指针数组、回调函数
c语言·开发语言
轻口味1 小时前
命名空间与模块化概述
开发语言·前端·javascript
前端小小王2 小时前
React Hooks
前端·javascript·react.js
迷途小码农零零发2 小时前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
晓纪同学2 小时前
QT-简单视觉框架代码
开发语言·qt
威桑2 小时前
Qt SizePolicy详解：minimum 与 minimumExpanding 的区别
开发语言·qt·扩张策略
飞飞-躺着更舒服2 小时前
【QT】实现电子飞行显示器（简易版）
开发语言·qt
明月看潮生2 小时前
青少年编程与数学 02-004 Go语言Web编程 16课题、并发编程
开发语言·青少年编程·并发编程·编程与数学·goweb
娃哈哈哈哈呀2 小时前
vue中的css深度选择器v-deep 配合!important
前端·css·vue.js
热门推荐
01Cube-Studio：开源大模型全链路一站式中台02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问07构建高效的广告投放系统：应用架构的设计与实现08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10【一文读懂】NTN（非地面网络）技术介绍