• JS高级 之 防抖debounce - throttle节流

    目录

    一、防抖 debounce

    1. 概念

    2. 应用场景

    3. 使用 underscore 实现防抖

    01 - 代码

    02 - 效果

    4. 实现

    01 - 基本实现

            代码

            效果

    02 - 优化 => this 和 参数绑定

            代码

            效果 

    03 - 优化 => 取消功能

            代码

            效果

    04 - 优化 => 立即执行功能

            代码

            效果

    05 - 优化 => 获取返回值

            代码

    06 - 最终版本

    二、节流 throttle 

    1. 概念

    2. 应用场景

    3. 使用 underscore 实现节流

    01 - 代码

    02 - 效果

    4. 实现

    01 - 基本实现

            代码

            效果

    02 - 优化 => this 和 参数的绑定

            代码

            效果

    03 - 优化 => 立即执行功能

            代码

            效果

    04 - 优化 => 获取返回值

            代码

    05 - 最终版本

    5. 第二种方法实现节流

    一、防抖 debounce

    1. 概念

    • 当事件触发时，相应的函数并不会立即触发，而是会等待一定的时间
    • 当事件密集触发时，函数的触发会被频繁的推迟，并把上一次的给取消掉
    • 只有等待了一段时间也没有事件触发，才会真正的执行响应函数

    2. 应用场景

    • 输入框中频繁的输入内容，搜索或者提交信息
    • 频繁的点击按钮，触发某个事件
    • 监听浏览器滚动事件，完成某些特定操作
    • 用户缩放浏览器的resize事件

    3. 使用 underscore 实现防抖

    01 - 代码

    2.   <input type="text" />
    3.  
    4.   
    5.   <script src="https://cdn.jsdelivr.net/npm/underscore@1.13.4/underscore-umd-min.js">script>
    6.  
    7.   <script>
    8.     // 2.获取input元素
    9.     const inputEl = document.querySelector('input');
    10.  
    11.     // 3.防抖处理代码
    12.     let counter = 1;
    13.     inputEl.oninput = _.debounce(function () {
    14.       console.log(`发送网络请求${counter++}:`, this.value);
    15.     }, 1000);
    16.   script>

    02 - 效果

    4. 实现

    01 - 基本实现

            代码

    2.   <input type="text" />
    3.   <script>
    4.     function starDebounce(fn, delay) {
    5.       // 1.用于记录上一次事件触发的timer
    6.       let timer = null;
    7.       // 2. 返回新的函数
    8.       return function () {
    9.         // 3. 如果有再次触发(更多次触发)事件, 那么取消上一次的事件
    10.         if (timer) clearTimeout(timer);
    11.         // 4. 绑定当前事件
    12.         timer = setTimeout(() => {
    13.           // 5. 延迟后执行
    14.           fn();
    15.           // 6. 执行后把当前定时器删除
    16.           timer = null;
    17.         }, delay);
    18.       };
    19.     }
    20.   script>
    21.   <script>
    22.     const inputDom = document.querySelector('input');
    23.     let counter = 1;
    24.     inputDom.oninput = starDebounce(function () {
    25.       console.log(`发送网络请求${counter++}`);
    26.     }, 1000);
    27.   script>

            效果

    02 - 优化 => this 和 参数绑定

            代码

    2.   <input type="text" />
    3.   <script>
    4.     function starDebounce(fn, delay) {
    5.       let timer = null;
    6.       // 1. 返回新的函数，此时这个函数中的this为绑定的dom对象 => 相当于 inputDom的oninput指向这个函数
    7.       // 2. 接受参数
    8.       return function (...args) {
    9.         if (timer) clearTimeout(timer);
    10.         timer = setTimeout(() => {
    11.           // 3. 绑定this，同时把参数传递给fn
    12.           fn.apply(this, args);
    13.           timer = null;
    14.         }, delay);
    15.       };
    16.     }
    17.   script>
    18.   <script>
    19.     const inputDom = document.querySelector('input');
    20.     let counter = 1;
    21.     inputDom.oninput = starDebounce(function (e) {
    22.       console.log(`发送网络请求 :${counter++} => ${this.value} `, e);
    23.     }, 1000);
    24.   script>

            效果 

    03 - 优化 => 取消功能

            代码

    2.   <input type="text" />
    3.   <button>取消button>
    4.   <script>
    5.     function starDebounce(fn, delay) {
    6.       let timer = null;
    7.       // 1. 返回新的函数，此时这个函数中的this为绑定的dom对象 => 相当于 inputDom的oninput指向这个函数
    8.       // 2. 接受参数
    9.       const _debounce = function (...args) {
    10.         if (timer) clearTimeout(timer);
    11.         timer = setTimeout(() => {
    12.           // 3. 绑定this，同时把参数传递给fn
    13.           fn.apply(this, args);
    14.           timer = null;
    15.         }, delay);
    16.       };
    17.       // 3. 因为函数也是一个对象，所以
    18.       _debounce.cancle = function () {
    19.         if (timer) clearTimeout(timer);
    20.         timer = null;
    21.       };
    22.       // 4. 返回函数
    23.       return _debounce;
    24.     }
    25.   script>
    26.   <script>
    27.     const inputDom = document.querySelector('input');
    28.     let counter = 1;
    29.     const debounceFn = starDebounce(function (e) {
    30.       console.log(`发送网络请求 :${counter++} => ${this.value} `, e);
    31.     }, 1000);
    32.     // 执行
    33.     inputDom.oninput = debounceFn;
    34.  
    35.     // 取消
    36.     const btnDom = document.querySelector('button');
    37.     btnDom.onclick = debounceFn.cancle;
    38.   script>

            效果

    04 - 优化 => 立即执行功能

            代码

    2.   <input type="text" />
    3.   <button>取消button>
    4.   <script>
    5.     function starDebounce(fn, delay, immediate = false) {
    6.       let timer = null;
    7.       // 1. 是否是第一次执行
    8.       let isInvoke = true;
    9.       const _debounce = function (...args) {
    10.         if (timer) clearTimeout(timer);
    11.  
    12.         // 2. 第一次操作不需要延迟
    13.         if (immediate && isInvoke) {
    14.           fn.apply(this, args);
    15.           timer = null;
    16.           isInvoke = false;
    17.           return;
    18.         }
    19.  
    20.         timer = setTimeout(() => {
    21.           fn.apply(this, args);
    22.           timer = null;
    23.           // 3. 执行完后恢复
    24.           isInvoke = true;
    25.         }, delay);
    26.       };
    27.       _debounce.cancle = function () {
    28.         if (timer) clearTimeout(timer);
    29.         timer = null;
    30.         // 3. 执行完后恢复
    31.         isInvoke = true;
    32.       };
    33.       return _debounce;
    34.     }
    35.   script>
    36.   <script>
    37.     const inputDom = document.querySelector('input');
    38.     let counter = 1;
    39.     const debounceFn = starDebounce(
    40.       function (e) {
    41.         console.log(`发送网络请求 :${counter++} => ${this.value} `, e);
    42.       },
    43.       1000,
    44.       true
    45.     );
    46.     // 执行
    47.     inputDom.oninput = debounceFn;
    48.  
    49.     // 取消
    50.     const btnDom = document.querySelector('button');
    51.     btnDom.onclick = debounceFn.cancle;
    52.   script>

            效果

    05 - 优化 => 获取返回值

            代码

    2.   <input type="text" />
    3.   <button>取消button>
    4.   <script>
    5.     function starDebounce(fn, delay, immediate = false) {
    6.       let timer = null;
    7.       let isInvoke = true;
    8.       const _debounce = function (...args) {
    9.         // 1. 因为有延迟，使用promise
    10.         return new Promise((resolve, reject) => {
    11.           try {
    12.             let res = null;
    13.             if (timer) clearTimeout(timer);
    14.             // 2. 第一次操作不需要延迟
    15.             if (immediate && isInvoke) {
    16.               // 2. 接受函数的返回值
    17.               res = fn.apply(this, args);
    18.               // 3. 传递出去
    19.               resolve(res);
    20.               timer = null;
    21.               isInvoke = false;
    22.               return;
    23.             }
    24.  
    25.             timer = setTimeout(() => {
    26.               res = fn.apply(this, args);
    27.               // 3. 传递出去
    28.               resolve(res);
    29.               timer = null;
    30.               // 3. 执行完后恢复
    31.               isInvoke = true;
    32.             }, delay);
    33.           } catch (error) {
    34.             reject(error);
    35.           }
    36.         });
    37.       };
    38.       _debounce.cancle = function () {
    39.         if (timer) clearTimeout(timer);
    40.         timer = null;
    41.         // 3. 执行完后恢复
    42.         isInvoke = true;
    43.       };
    44.       return _debounce;
    45.     }
    46.   script>
    47.   <script>
    48.     const debounceFn = starDebounce(function (name, text, age) {
    49.       console.log(name, text, age);
    50.       return '执行完了';
    51.     }, 1000);
    52.     // 4. 传递参数并接受返回值
    53.     debounceFn('coder', 'star', 18).then((res) => {
    54.       console.log(res);
    55.     });
    56.     // 取消
    57.     const btnDom = document.querySelector('button');
    58.     btnDom.onclick = debounceFn.cancle;
    59.   script>

    06 - 最终版本

    1. function starDebounce(fn, delay, immediate = false) {
    2.   let timer = null;
    3.   let isInvoke = true;
    4.  
    5.   const _debounce = function (...args) {
    6.     return new Promise((resolve, reject) => {
    7.       try {
    8.         let res = null;
    9.         if (timer) clearTimeout(timer);
    10.         if (immediate && isInvoke) {
    11.           res = fn.apply(this, args);
    12.           resolve(res);
    13.           timer = null;
    14.           isInvoke = false;
    15.           return;
    16.         }
    17.  
    18.         timer = setTimeout(() => {
    19.           res = fn.apply(this, args);
    20.           resolve(res);
    21.           timer = null;
    22.           isInvoke = true;
    23.         }, delay);
    24.       } catch (error) {
    25.         reject(error);
    26.       }
    27.     });
    28.   };
    29.   _debounce.cancle = function () {
    30.     if (timer) clearTimeout(timer);
    31.     timer = null;
    32.     isInvoke = true;
    33.   };
    34.   return _debounce;
    35. }

    二、节流 throttle 

    1. 概念

    • 当事件触发时，会执行这个事件的响应函数
    • 如果这个事件会被频繁触发，那么节流函数会按照一定的频率来执行函数
    • 不管在这个中间有多少次触发这个事件，执行函数的频繁总是固定的

    2. 应用场景

    • 监听页面的滚动事件
    • 鼠标移动事件
    • 用户频繁点击按钮操作
    • 轮播图的按钮滚动

    3. 使用 underscore 实现节流

    01 - 代码

    2.   <input type="text" />
    3.  
    4.   
    5.   <script src="https://cdn.jsdelivr.net/npm/underscore@1.13.4/underscore-umd-min.js">script>
    6.  
    7.   <script>
    8.     // 2.获取input元素
    9.     const inputEl = document.querySelector('input');
    10.  
    11.     // 3.节流处理代码
    12.     let counter = 1;
    13.     inputEl.oninput = _.throttle(function () {
    14.       console.log(`发送网络请求${counter++}:`, this.value);
    15.     }, 1000);
    16.   script>

    02 - 效果

    4. 实现

    01 - 基本实现

            代码

    2.   <input type="text" />
    3.  
    4.   <script>
    5.     /**
    6.      * fn : 传入的函数
    7.      * interval : 间隔的请求时间
    8.      * 公式 : 等待时间 = 间隔时间 - ( 当前时间 - 开始时间 ) => interval - ( nowTime - startTime )
    9.      *
    10.      * 等待时间 <= 0 即可执行函数
    11.      */
    12.     function starThrottle(fn, interval) {
    13.       // 1. 获取开始时间，赋初始值为0
    14.       let startTime = 0;
    15.       function throttle() {
    16.         // 2. 获取当前时间
    17.         const nowTime = new Date().getTime();
    18.         // 3. 计算等待时间
    19.         const waitTime = interval - (nowTime - startTime);
    20.         // 4. 判断是否执行函数，第一次会默认执行
    21.         if (waitTime <= 0) {
    22.           fn();
    23.           // 5.一旦执行完后，把当前时间赋值给开始时间
    24.           startTime = nowTime;
    25.         }
    26.       }
    27.       return throttle;
    28.     }
    29.   script>
    30.  
    31.   <script>
    32.     // 2.获取input元素
    33.     const inputEl = document.querySelector('input');
    34.  
    35.     // 3.节流处理代码
    36.     let counter = 1;
    37.     inputEl.oninput = starThrottle(function () {
    38.       console.log(`发送网络请求${counter++}:`, this.value);
    39.     }, 2000);
    40.   script>

            效果

    02 - 优化 => this 和 参数的绑定

            代码

    2.   <input type="text" />
    3.  
    4.   <script>
    5.     function starThrottle(fn, interval) {
    6.       let startTime = 0;
    7.       // 节流函数接受参数
    8.       function throttle(...args) {
    9.         const nowTime = new Date().getTime();
    10.         const waitTime = interval - (nowTime - startTime);
    11.         if (waitTime <= 0) {
    12.           // 相当于 inputEl 直接调用该函数，所以this指向 inputEl
    13.           // 把参数传给函数，即可在回调函数中拿到
    14.           fn.apply(this, args);
    15.           startTime = nowTime;
    16.         }
    17.       }
    18.       return throttle;
    19.     }
    20.   script>
    21.  
    22.   <script>
    23.     // 2.获取input元素
    24.     const inputEl = document.querySelector('input');
    25.  
    26.     // 3.节流处理代码
    27.     let counter = 1;
    28.     inputEl.oninput = starThrottle(function (e) {
    29.       // 使用
    30.       console.log(`发送网络请求${counter++}:`, this.value, e);
    31.     }, 2000);
    32.   script>

            效果

    03 - 优化 => 立即执行功能

            代码

    2.   <input type="text" />
    3.  
    4.   <script>
    5.     /**
    6.      * fn : 传入的函数
    7.      * interval : 间隔时间
    8.      * immediate : 第一次是否执行，默认是马上执行的
    9.      */
    10.     function starThrottle(fn, interval, immediate = true) {
    11.       let startTime = 0;
    12.       function throttle(...args) {
    13.         const nowTime = new Date().getTime();
    14.         // 如果immediate为false，且 开始时间为0时
    15.         // 把当前时间赋值给开始时间，这样使得第一次不会执行
    16.         if (!immediate && startTime === 0) {
    17.           startTime = nowTime;
    18.         }
    19.         const waitTime = interval - (nowTime - startTime);
    20.         if (waitTime <= 0) {
    21.           fn.apply(this, args);
    22.           startTime = nowTime;
    23.         }
    24.       }
    25.       return throttle;
    26.     }
    27.   script>
    28.  
    29.   <script>
    30.     // 2.获取input元素
    31.     const inputEl = document.querySelector('input');
    32.  
    33.     // 3.节流处理代码
    34.     let counter = 1;
    35.     inputEl.oninput = starThrottle(
    36.       function (e) {
    37.         // 使用
    38.         console.log(`发送网络请求${counter++}:`, this.value, e);
    39.       },
    40.       1000,
    41.       false
    42.     );
    43.   script>

            效果

    04 - 优化 => 获取返回值

            代码

    2.  
    3. <script>
    4.   // 3.节流处理代码
    5.   let counter = 1;
    6.   const throttleFn = starThrottle(function (...e) {
    7.     // 使用
    8.     console.log(`发送网络请求${counter++}:`, e);
    9.     return '无敌 🦖 战神';
    10.   }, 1000);
    11.   throttleFn('inside', 'args').then((res) => {
    12.     console.log('返回值:', res);
    13.   });
    14. script>

    05 - 最终版本

    1. function starThrottle(fn, interval, immediate = true) {
    2.   let startTime = 0;
    3.   function throttle(...args) {
    4.     return new Promise((resolve, reject) => {
    5.       try {
    6.         const nowTime = new Date().getTime();
    7.         if (!immediate && startTime === 0) {
    8.           startTime = nowTime;
    9.         }
    10.         const waitTime = interval - (nowTime - startTime);
    11.         if (waitTime <= 0) {
    12.           //
    13.           const res = fn.apply(this, args);
    14.           resolve(res);
    15.           startTime = nowTime;
    16.         }
    17.       } catch (error) {
    18.         reject(error);
    19.       }
    20.     });
    21.   }
    22.   return throttle;
    23. }

    5. 第二种方法实现节流

    1. // 直接最终版本
    2.
  • 相关阅读:
    10、SpringBoot_测试用例
    Spring AOP 简介
    【深入浅出 Yarn 架构与实现】2-2 Yarn 基础库 - 底层通信库 RPC
    人工智能对我们的生活带来的影响
    C#:实现渗透建堆算法(附完整源码)
    dicom镜像反转90度
    MySQLBackup备份数据库
    微服务和Spring Cloud Alibaba介绍
    Unity InputField宽度自适应内容
    Windows系统使用MinGW编译二维码库Zbar
  • 原文地址：https://blog.csdn.net/a15297701931/article/details/126603269