函数防抖与节流工具

最新推荐文章于 2024-01-15 08:06:14 发布
最新推荐文章于 2024-01-15 08:06:14 发布
阅读量585 收藏 5
点赞数 1
分类专栏： js总结 文章标签： 函数防抖 防抖与节流思路 vue防抖 uniapp防抖 防抖与节流的实现
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z1783883121/article/details/116021206
版权
本文详细介绍了JavaScript中的函数防抖与节流技术，通过实例代码展示了如何实现这两种优化技巧，并解释了它们在表单提交、搜索、页面滚动等场景中的应用场景。同时，提供了立即执行与非立即执行两种模式的实现，并讨论了在Vue/UniApp等框架中的使用方法。文章最后还探讨了如何处理函数参数和调用方式，以适应不同的需求。
摘要由CSDN通过智能技术生成

函数防抖与节流工具

先贴代码与使用方法再讲理论：

class mains {
	constructor(arg) {
		this.timer, this.flag = true;
	}
	/**
	 * 函数防抖（立即执行版与延迟执行）
	 * @param {Function}  func  需要执行的函数
	 * @param {Number} delay 延迟/等待时间
	 * @param {Array} args 调用方法的参数
	 * @param {Boolean}  runNow 是否立即执行
	 * @param other 温馨提示：无参更改runNow市args传[]  即可
	 */
	debounce(func, delay, args = [], runNow = true) {
		clearTimeout(this.timer);
		runNow ? (() => {
			if (this.flag) {
				this.flag = false;
				func(...args);
			}
			this.timer = setTimeout(() => {
				this.flag = true;
			}, delay);
		})() : (() => {
			this.timer = setTimeout(() => {
				func(...args);
			}, delay);
		})()
	}
	/**
	 * 函数节流（立即执行版与延迟执行）
	 * @param {Function}  func  需要执行的函数
	 * @param {Number} delay 延迟/等待时间
	 * @param {Array} args 调用方法的参数
	 * @param {Boolean}  runNow 是否立即执行
	 */
	throttling(func, delay, args = [], runNow = true) {
		if (this.flag) {
			this.flag = false;
			clearTimeout(this.timer);
			runNow ? (() => {
				func(...args);
				this.timer = setTimeout(() => {
						this.flag = true;
					},
					delay);
			})() : (() => {
				this.timer = setTimeout(() => {
						this.flag = true;
						func(...args);
					},
					delay);
			})();
		}
	}
}

const debounceUtils = new mains();//注意：如果一个方法里同时调用debounce和throttling需要把本行注释单独引入new，否则只会触发后调用的

export default debounceUtils;
vue/uniapp等有模块概念的框架原生
impor导入文件通过Vue.prototype或其他方式将其挂载至原型或全局上调用debounce(防抖)、throttling(节流)方法传入参数即可或者通过import引入使用使用script引入然后调用debounceUtils.debounce(防抖)或debounceUtils.throttling(节流)方法传入参数即可

码云uni示例

概述：（理论）

1.防抖(防止某件事在一时间多次触发，例如：在表单提交时请求还未相应，用户以为没点到有重新点了几下)。常用于表单提交以及下单/加入购物车

2.节流(也是为了防止某件事在一时间多次触发,例如饿了么、美团、滴滴抢单或者是搜索商品)。常用于搜索商品/下拉刷新限制/抢单类

区别：

触发时间
防抖最后一次触发之后重新计时，倒计时结束之后才能触发下一次
节流每隔一段时间(时间结束之后)才能触发下一次

总结： 防抖是在最后一次触发之后重新计时，倒计时结束之后才能触发下一次。节流是每隔一段时间(时间结束之后)才能触发下一次

实现思路：

防抖和节流的实现方式有许多种（但网络上大部分都是使用apply来实现的这对vue、uni好像不太友好）。

正题

因为都与时间有关所有使用js中的定时器，“每隔一段时间（时间结束之后），最后一次触发” 所以我们选择使用 setTimeout() 来实现

一、防抖：

（1）当我们使用函数时每调用一次他就会执行一次，我们实现的效果都需要延迟/等待一段时间后才能执行。所以我们把他放入定时器中(这里我们设置时间为2000)，这时我们运行是这样的：连续点击5次(从第一次点击之后2秒后执行了我们传入的方法触发了5次，这是因为你点击5次所以就调用了5次【小白能理解吧😄】)

实现效果是这样的
在这里插入图片描述

//相关代码：
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>防抖</title>
</head>

<body>
  <button id="btn" onclick="add()">提交</button>

  <script>
    //防抖函数
    function debounce(func, delay) {
      setTimeout(() => {
        func();
      }, delay)
    }
    // 点击事件
    function add() {
      debounce(function () {
        console.log(1111111)
      }, 2000)
    }
  </script>
</body>

</html>

（2）回顾一下【总结】在最后一次触发之后，所以这时我们的思路时使用cleaTimeout()方法把之前的定时器清掉只留下最后一个触发的（由于在js中有函数作用域所以我们不能将定时函数放在函数【debounce】中）这时我们的代码是这样的：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>防抖</title>
</head>

<body>
  <button id="btn" onclick="add()">提交</button>

  <script>
    let timer;
    //防抖函数
    function debounce(func, delay) {
      clearTimeout(timer)
      timer = setTimeout(() => {
        func();
      }, delay)
    }
    // 点击事件
    function add() {
      debounce(function () {
        console.log(1111111)
      }, 2000)
    }
  </script>
</body>

</html>

实现效果是这样的：(嗯？有点内味了。好吧差不多就这样把)

在这里插入图片描述

（3）先放下之前的，我们再考虑一下如何实现立即执行版本的？【思考ing… 立即执行版就是一调用他就先执行函数，再进行倒计时，倒计时结束之后才能触发下一次，如果倒计时还没结束又被调用了那就重新开始倒计时】嗯？这么简单？那我们就这样吧：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>防抖</title>
</head>

<body>
  <button id="btn" onclick="add()">提交</button>

  <script>
    let timer;
    let flag = true;//定义一个置换变量，用来判断是否可以执行函数。

    //防抖函数
    function debounce(func, delay) {
      clearTimeout(timer)
      if (flag) {
        // 进入这里说明可以调用了
        flag = false;
        func();
      }
      timer = setTimeout(() => {
        flag = true;
      }, delay)
    }
    // 点击事件
    function add() {
      debounce(function () {
        console.log(1111111)
      }, 2000)
    }
  </script>
</body>

</html>

实现效果是这样的：(嗯？好像又有点内味了。好吧差不多又就这样把)

在这里插入图片描述

（4）最后合并一下立即执行版和非立即执行版：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>防抖</title>
</head>

<body>
  <button id="btn" onclick="add()">提交</button>

  <script>
    let timer;
    let flag = true;//定义一个Boolean变量，用来判断是否可以执行函数。

    //防抖函数
    function debounce(func, delay, runNow=false) {
      clearTimeout(timer)
      runNow ? (() => {
        if (flag) {
          // 进入这里说明可以调用了
          flag = false;
          func();
        }
        timer = setTimeout(() => {
          flag = true;
        }, delay)
      })() : (() => {
        timer = setTimeout(() => {
          func();
        }, delay)
      })()
    }
    // 点击事件
    function add() {
      debounce(function () {
        console.log(1111111)
      }, 2000)
    }
  </script>
</body>

</html>

二、节流

（1）第一步思路也和防抖1类似

（2）我们再回顾一下【总结】每隔一段时间才能触发emm… 这个不是和防抖立即执行版类似么（倒计时结束之后才能触发）所以我们把防抖立即执行版的代码复制下来稍稍更改一下不就行了么？

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>防抖</title>
</head>

<body>
  <button id="btn" onclick="add()">提交</button>

  <script>
    let timer;
    let flag = true;//定义一个置换变量，用来判断是否可以执行函数。

    //节流函数
    function throttling(func, delay, runNow = false) {
      if (flag) {
        flag = false;
        clearTimeout(timer)
        timer = setTimeout(() => {
          func();
          flag = true;
        }, delay)
      }
    }
    // 点击事件
    function add() {
      throttling(function () {
        console.log(1111111)
      }, 1000)
    }
  </script>
</body>

</html>

实现效果是这样的：

在这里插入图片描述

（2）立即执行版？立即执行版不就是触发之后就执行嘛（不就是在非立即执行版上稍稍改动一下位置就行了么？）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>防抖</title>
</head>

<body>
  <button id="btn" onclick="add()">提交</button>

  <script>
    let timer;
    let flag = true;//定义一个置换变量，用来判断是否可以执行函数。

    //节流函数
    function throttling(func, delay, runNow = false) {
      if (flag) {
        flag = false;
        func();
        clearTimeout(timer)
        timer = setTimeout(() => {
          flag = true;
        }, delay)
      }
    }
    // 点击事件
    function add() {
      throttling(function () {
        console.log(1111111)
      }, 1000)
    }
  </script>
</body>

</html>

实现效果是这样的：

在这里插入图片描述

（3）最后合并一下就是这样的了？

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>防抖</title>
</head>

<body>
  <button id="btn" onclick="add()">提交</button>

  <script>
    let timer;
    let flag = true;//定义一个置换变量，用来判断是否可以执行函数。

    //节流函数
    function throttling(func, delay, runNow = true) {
      if (flag) {
        flag = false;
        clearTimeout(timer)
        runNow ? (() => {
          func();
          timer = setTimeout(() => {
            flag = true;
          }, delay)
        })() : (() => {
          timer = setTimeout(() => {
            func();
            flag = true;
          }, delay)
        })()
      }
    }
    // 点击事件
    function add() {
      throttling(function () {
        console.log(1111111)
      }, 1000)
    }
  </script>
</body>

</html>

三、最后(我们思考一下调用函数是否可能会需要传参呢？)所有就再增加一个形参吧！

最后的代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>防抖</title>
</head>

<body>
  <button id="btn" onclick="add()">提交</button>

  <script>
    let timer;
    let flag = true;//定义一个置换变量，用来判断是否可以执行函数。

    //防抖函数
    function throttling(func, delay, args = [], runNow = true) {
      if (flag) {
        flag = false;
        clearTimeout(timer)
        runNow ? (() => {
          func(...args);
          timer = setTimeout(() => {
            flag = true;
          }, delay)
        })() : (() => {
          timer = setTimeout(() => {
            func(...args);
            flag = true;
          }, delay)
        })()
      }
    }

    //防抖函数
    function debounce(func, delay, args = [], runNow = false) {
      clearTimeout(timer)
      runNow ? (() => {
        if (flag) {
          // 进入这里说明可以调用了
          flag = false;
          func(...args);
        }
        timer = setTimeout(() => {
          flag = true;
        }, delay)
      })() : (() => {
        timer = setTimeout(() => {
          func(...args);
        }, delay)
      })()
    }

    // 点击事件
    function add() {
      // 调用外部方法
      debounce(runMethord, 1000, [666], true)
    }

    // 要调用/触发的方法
    function runMethord(num) {
      console.log(num);
    }
  </script>
</body>

</html>

PS:上面的代码会有一个小小的bug(这里不描述)，所以我们将其封装成class就可以很好的使用

JS工具类函数之函数防抖与节流
Sodaxiang的博客
12-05 213
在开发中，遇到一些频繁触发的事件，如window.onresize,window.onmousemove，window.onscroll等，或是实时输入模糊搜索需要不断向服务器发送数据的类场景，一般都会用到函数防抖与节流。那么，什么是函数防抖与节流呢？ 1.函数防抖 函数防抖：函数需要频繁触发时，只有足够空闲的时候，才会执行一次。好像公交司机会等人都上车后才会开车一样.。 应用场景：实时搜索，拖拽等。 实现原理：第一次调用函数时，创建一个定时器，然后在指定时间之后再调用该函数。 function
防抖与节流 （场景、函数封装）
m0_45382009的博客
02-23 476
防抖 场景：输入框实时查询 第一次输入触发事件时，开始计时：（比如计时500ms） 计时500ms到了，执行第一次触发的查询 如果计时500ms还没有到，第二次事件又触发了，则清除第一次的计时，重新计时，如果计时500ms到了，执行查询，如果未到第三次事件又触发了，则又重新计时…（用户触发事件过于频繁，只执行最后一次） 比喻：一条公路上规定时间内只允许通过一辆车 如果在规定的时间内，第一辆车跑完了，就去领奖 如果这辆车到时间了还没跑完，就扔下去，第二辆车上路，重新计时… <input type
javascript防抖函数debounce详解
12-09
定义及解读 防抖函数 debounce 指的是某个函数在某段时间内，无论触发了多少次回调，都只执行最后一次。假如我们设置了一个等待时间 3 秒的函数，在这 3 秒内如果遇到函数调用请求就重新计时 3 秒，直至新的 3 秒内没有函数调用请求，此时执行函数，不然就以此类推重新计时。 举一个小例子：假定在做公交车时，司机需等待最后一个人进入后再关门，每次新进一个人，司机就会把计时器清零并重新开始计时，重新等待 1 分钟再关门，如果后续 1 分钟内都没有乘客上车，司机会认为乘客都上来了，将关门发车。 此时「上车的乘客」就是我们频繁操作事件而不断涌入的回调任务；「1 分钟」就是计时器，它是司机决定「
防抖和节流原理分析
weixin_34289744的博客
08-21 186
窗口的resize、scroll、输入框内容校验等操作时，如果这些操作处理函数是较为复杂或页面频繁重渲染等操作时，在这种情况下如果事件触发的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少触发的频率，同时又不影响实际效果。 eg：搜索框的请求优化，输入搜索词条需要立即触发搜索请求时，防抖和节流可以将多个请求合并为一...
常用工具函数【节流函数和防抖函数】
weixin_43837268的博客
09-24 179
/** * @desc 函数防抖 * @param {需要防抖的函数} func * @param {延迟时间} wait */ export function debounce(func, wait = 500) { // 缓存一个定时器id let timer = 0; // 这里返回的函数是每次用户实际调用的防抖函数 // 如果已经设定过定时器了就清空上一次的定时器 // 开始一个新的定时器，延迟执行用户传入的方法 return functi..
函数防抖和节流
weixin_34405557的博客
08-04 323
在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。 通常这种情况下我们怎么去解决的呢？一般来讲，防抖和节流是比较好的解决方案。 让我们先来看看在事件持续触发的过程中频繁执行函数是怎样的一种情况。 html 文件中代码如下 &lt;div id="content" st...
防抖节流工具类库loadsh
weixin_61153206的博客
01-23 404
防抖与节流的封装函数与使用详解
01-20
在前端开发中，为了优化性能和...总之，函数防抖和节流都是优化前端性能的重要工具，通过控制函数的执行频率，可以有效地避免资源浪费，提升用户体验。在实际开发中，可以根据事件的特性和需求选择合适的方法进行优化。
javaScript函数节流与防抖之区别
08-11
总结，函数防抖和节流是JavaScript性能优化的关键工具，通过控制函数执行的时机和频率，能够有效地避免资源浪费，提升应用的响应速度和用户体验。在日常开发中，我们需要根据具体场景灵活运用，以达到最佳的性能优化...
函数防抖和节流的原理、应用场景、区别、手写源码
小草莓的博客
11-06 393
如果有人进电梯（触发事件），那电梯将在10秒钟后出发（执行事件监听器），这时如果又有人进电梯了（在10秒内再次触发该事件），我们又得等10秒再出发（重新计时）不管事件触发有多频繁，节流都会保证在规定时间内，一定会执行一次回调函数。节流的原理是在一段时间内只执行一次事件回调函数，如果在这段时间内事件又被触发了，则忽略该事件。防抖的原理是在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，那么会重新计时。任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。
防抖节流工具型
yezikeji的博客
01-20 80
/** @description: 防抖函数的封装 @param {Function} callback : 要执行的代码 @param {String} time : 要倒计时的时间(停止后多久执行逻辑代码) @return: 返回防抖函数 */ function fandou (callback, time) { let timer = null // 声明一个将要存放定时器的变量https://www.xxe.io/ return function () { // 返回一个函数 clearTim
防抖节流的理解和防抖节流工具类的封装
weixin_47813845的博客
01-11 291
首先，我们要清楚防抖和节流的区别 防抖 在事件被频繁触发时，只有上一次与下一次空出足够的空闲时间，事件才会执行 节流 在事件频繁触发时，规定时间内，事件只会执行一次 然后我们来看封装的工具类函数 //防抖:在事件被频繁触发时，只有上一次与下一次空出足够的空闲时间，事件才会执行 function debounce(fnEvent, time) { var _time = null return function () { ..
防抖节流工具型方法的封装
小王几pl
01-17 3202
封装防抖工具型方法 /** * @description: 防抖函数的封装 * @param {Function} callback : 要执行的代码 * @param {String} time : 要倒计时的时间(停止后多久执行逻辑代码) * @return: 返回防抖函数 */ function fandou (callback, time) { let timer = null // 声明一个将要存放定时器的变量 return function () { // 返回一个函数
页面防抖函数
wenxin_liu的博客
07-12 564
防抖（debounce） 什么是防抖？ 在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时。 应用场景 (1) 用户在输入框中连续输入一串字符后，只会在输入完后去执行最后一次的查询ajax请求，这样可以有效减少请求次数，节约请求资源； (2) window的resize、scroll事件，不断地调整浏览器的窗口大小、或者滚动时会触发对应事件，防抖让其只触发一次； 还是上述列子，这里加入防抖来优化一下，完整代码如下： <!DOCTYPE html> <html lang="
防抖函数实
02-19 181
防抖函数原理 在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计算。 适用场景 按钮提交场景：防止多次提交按钮，只执行最后一次提交 服务端验证场景：表单验证需要服务端配合，只执行一段连续的输入事件的最后一次，还有搜索词联想功能等 函数实现 /** * 防抖函数 */ const debounce = (fn, delay) => { let timer =...
防抖函数与节流函数
csdn_haow的博客
04-03 178
应用场景 实际工作中，我们经常性的会通过监听某些事件完成对应的需求，比如： 通过监听 scroll 事件，检测滚动位置，根据滚动位置显示返回顶部按钮 通过监听 resize 事件，对某些自适应页面调整DOM的渲染（通过CSS实现的自适应不再此范围内） 通过监听 keyup 事件，监听文字输入并调用接口进行模糊匹配 常规实现，以监听 scroll 事件为例 我们先来看一下scroll事件的...
函数防抖与函数节流
xiaobai1520774的博客
05-12 178
函数防抖与函数节流防抖（debounce）节流（throttle）一、防抖二、节流 在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。 防抖（debounce） 所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。 节流（throttle） 所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函
前端学习：js实现倒计时，拖拽事件，防抖，节流，懒加载，图片的onload事件，lazyload插件的使用，上传头像
qq_45926448的博客
07-14 641
js实现倒计时，拖拽事件，防抖，节流，懒加载，图片的onload事件，lazyload插件的使用，上传头像
实现防抖函数
最新发布
qq_17335549的博客
01-15 515
【代码】实现防抖函数。
JavaScript防抖与节流技术解析
总结，防抖和节流是JavaScript性能优化的重要工具，它们通过控制函数的执行频率，避免了不必要的计算和网络请求，提升了用户体验。在实际项目中，根据具体业务需求选择合适的策略，能够显著提高页面的响应速度和性能...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

acqui~Zhang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值
>