彻底理解防抖和节流

你会发光哎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>
相关推荐
杨荧几秒前
【JAVA毕业设计】基于Vue和SpringBoot的服装商城系统学科竞赛管理系统
java·开发语言·vue.js·spring boot·spring cloud·java-ee·kafka
minDuck2 分钟前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
白子寰6 分钟前
【C++打怪之路Lv14】- “多态“篇
开发语言·c++
王俊山IT19 分钟前
C++学习笔记----10、模块、头文件及各种主题（一）---- 模块（5）
开发语言·c++·笔记·学习
为将者,自当识天晓地。21 分钟前
c++多线程
java·开发语言
小政爱学习！23 分钟前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。28 分钟前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼34 分钟前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k093338 分钟前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
神奇夜光杯1 小时前
Python酷库之旅-第三方库Pandas(202)
开发语言·人工智能·python·excel·pandas·标准库及第三方库·学习与成长
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解