欢迎来到尧图网

客户服务 关于我们

您的位置：首页 > 财经 > 创投人物 > 彻底理解防抖和节流

彻底理解防抖和节流

2024/10/24 19:16:05 来源：https://blog.csdn.net/qq_45730399/article/details/141866089  浏览:  次   关键词：彻底理解防抖和节流

目录

  • 防抖（debounce）
    • 理解
    • 应用场景
    • `Underscore`库
    • 手写
      • 基本实现
      • 优化实现
  • 节流（throttle）
    • 理解
    • 应用场景
    • `Underscore`库
    • 手写
      • 基本实现
      • 优化实现

防抖（debounce）

理解

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

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

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

  • 只有等待了一段时间也没有事件触发，才会真正的执行响应函数
    在这里插入图片描述

应用场景

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

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

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

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

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

Underscore库

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

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

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

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

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

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

  • 使用：

    <!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>

手写

基本实现

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

<!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) {// 用于记录上一次事件触发的timerlet 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方式或者回调参数的方式

<!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) {// 用于记录上一次事件触发的timerlet 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库

<!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>

手写

基本实现

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

<!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); // 还有多久触发fnif (waitTime <= 0) {fn();startTime = nowTime;}}return _throttle;};const inputChange = function () {console.log("发送网络请求");};inputEl.oninput = myThrottle(inputChange, 1000);</script></body>
</html>

优化实现

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

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

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

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

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

<!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); // 还有多久触发fnif (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>

版权声明:

本网仅为发布的内容提供存储空间，不对发表、转载的内容提供任何形式的保证。凡本网注明“来源：XXX网络”的作品，均转载自其它媒体，著作权归作者所有，商业转载请联系作者获得授权，非商业转载请注明出处。

我们尊重并感谢每一位作者，均已注明文章来源和作者。如因作品内容、版权或其它问题，请及时与我们联系，联系邮箱：809451989@qq.com，投稿邮箱：809451989@qq.com

相关资讯

热文排行

最新新闻

推荐新闻

热搜词

【mod分享】极品飞车10高清模组，，全新道路，全新建筑，高清植被，全新的道路围栏，全新的天空，画质直逼极品飞车20。支持光追 DBMS_LOGMNR归档日志挖掘乱码DM8 python画图|坐标轴显隐设置 iPhone图片/照片/视频复制到win10系统的简单方法 - 照片导出 消息队列的消息积压和消息波动区别 springmvc源码流程解析（一）