节流、防抖

最新推荐文章于 2023-08-01 17:47:32 发布
最新推荐文章于 2023-08-01 17:47:32 发布
阅读量265 收藏 1
点赞数
分类专栏： 节流、防抖 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43506529/article/details/109552648
版权

节流、防抖

节流和防抖的理解

  1. 节流：当一个事件持续触发时，我们期望降低事件触发的频率，事件处理函数还是会触发多次。比如在移动端手机浏览器对onscroll事件不能实时触发，就是在内部做了节流处理。
  2. 防抖：当一个事件持续触发时，我们期望在最后一次事件触发时再执行事件处理函数。
  3. 使用场景：
    1. 在连续触发事件的场景中，仅仅需要在最后一次事件触发时执行事件处理函数，使用防抖。比如根据输入框内容进行搜索查询、浏览器窗口resize后重新渲染页面等。
    2. 在连续触发事件的场景中，需要降低事件触发的频次，使用节流。如上拉加载更多数据、图片懒加载（监听图片元素是否快到可视区域了）等
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>节流2</title>
	</head>
	<body>
		<button id="btn1">按钮1 点击触发</button>
		<br />
		<button id="btn2">点击该按钮，触发10次按钮1的点击</button>
		<script>
			// 节流: 控制事件触发的频率. 在约定的时间内，虽然点击了按钮很多次，但是事件逻辑只触发一次
			const btn1 = document.getElementById('btn1')
			const btn2 = document.getElementById('btn2')

			// btn1.addEventListener('abc', handler, false)

			// 节流后
			btn1.addEventListener('click', throttle(handler, 301), false)

			// 1秒内触发了10次 让每间隔100ms触发1次
			// 100ms 1 -- 100ms 2 -- 100ms 3 -- 100ms 4 -- 100ms 5 -- 100ms 6 -- 100ms 7 -- 100ms 8 -- 100ms 9 -- 100ms 10
			// 触发的事件是: 1 4 7 10

			// 点击1次btn2，触发10次btn1的点击事件
			btn2.addEventListener(
				'click',
				async function () {
					// 自定义事件Event
					// const event = new Event('click')

					// 自定义事件CustomEvent
					// 二者都是自定义事件的构造函数
					// CustomEvent比Event多的功能是可以携带自定义数据

					for (let i = 1; i < 11; i++) {
						// 等待100毫秒
						await delay(100)
						// 分发/触发某个事件
						const event = new CustomEvent('click', { detail: i })
						btn1.dispatchEvent(event)
					}
				},
				false
			)

			function delay(ts) {
				return new Promise((resolve, reject) => {
					// 内部执行异步任务
					setTimeout(() => {
						resolve()
					}, ts)
				})
			}

			function handler(ev) {
				console.log('按钮被点击了', ev)
			}

			//  1秒内点击了10次，
			//  每次点击时先查看是否已经有一个待执行，如果有，则当前的点击视为无效，如果没有则执行当前的点击对应的逻辑
			/**
			 * 节流函数
			 *
			 * @Param fn function 被节流后 执行的函数
			 * @Param delay number 控制多少秒内只触发一次
			 */
			function throttle(fn, delay) {
				let timer = null

				// 每次点击都会执行这个函数
				return function (ev) {
					// timer存在，说明当前时间段内，已经有一个fn函数待执行，就阻止当前的点击
					if (timer) return

					// delay秒后执行fn函数
					// 等于 delay秒内没有执行任何的函数逻辑，delay秒后立即执行了fn
					// 等于 在delay秒内只执行了一次fn
					timer = setTimeout(() => {
						fn(ev)
						timer = null
					}, delay)
				}
			}
		</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" value="" id="ipt1" />
		<button id="btn1">按钮1</button>
		<br />

		<!-- 防抖
    等待桌子不抖的时候再写作业
    写作业：就是我们要执行的业务逻辑 handler
    问题：如何判定桌子不再抖了
    方案: 在桌子抖动时，我们加一个时间预期5秒，如果5秒内都没有再抖动，那么我们就写作业(执行handler);
         如果在5秒内又有抖动，那就重新从新的抖动开始再计时。 -->

		<script>
			let btn1 = document.getElementById('btn1')

			// 防抖前
			// btn1.addEventListener('click', handler, false)

			// 防抖后
			btn1.addEventListener('click', debounce(handler, 1000), false)

			function handler() {
				console.log('按钮1被点击了 执行对应的业务逻辑')
			}

			// 1000ms
			// 100ms 触发 200ms 触发 300ms触发 ... 900ms 触发 1秒触发

			function debounce(fn, delay) {
				let timer = null

				// 每次click触发时 执行该函数
				return function () {
					// 只要触发点击，那就清理掉上次准备要执行的handler定时任务
					clearTimeout(timer)

					timer = setTimeout(() => {
						fn()
					}, delay)
				}
			}

			function sum(a, b) {
				return a + b
			}

			sum(1, 2)

			// 在第二次执行函数时，无法取得上一次的数据
			sum(2, 3)
		</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" value="" id="ipt1" />
		<button id="btn1">按钮1</button>
		<br />
		<button id="btn2">按钮2 点击该按钮触发10次按钮1的点击</button>

		<!-- 防抖
    等待桌子不抖的时候再写作业
    写作业：就是我们要执行的业务逻辑 handler
    问题：如何判定桌子不再抖了
    方案: 在桌子抖动时，我们加一个时间预期5秒，如果5秒内都没有再抖动，那么我们就写作业(执行handler);
         如果在5秒内又有抖动，那就重新从新的抖动开始再计时。 -->

		<script>
			let btn1 = document.getElementById('btn1')
			let btn2 = document.getElementById('btn2')

			// 防抖前
			// btn1.addEventListener('click', handler, false)

			// 防抖后
			btn1.addEventListener('click', debounce(handler, 1000), false)

			function handler(ev) {
				console.log('按钮1被点击了 执行对应的业务逻辑', ev)
			}

			// 1000ms
			// 100ms 触发 200ms 触发 300ms触发 ... 900ms 触发 1秒触发

			function debounce(fn, delay) {
				let timer = null

				// 每次click触发时 执行该函数
				return function (ev) {
					// 只要触发点击，那就清理掉上次准备要执行的handler定时任务
					clearTimeout(timer)

					timer = setTimeout(() => {
						fn(ev)
					}, delay)
				}
			}

			// 点击1次btn2，触发10次btn1的点击事件
			btn2.addEventListener(
				'click',
				async function () {
					// 自定义事件Event
					// const event = new Event('click')

					// 自定义事件CustomEvent
					// 二者都是自定义事件的构造函数
					// CustomEvent比Event多的功能是可以携带自定义数据

					for (let i = 1; i < 11; i++) {
						// 等待100毫秒
						await delay(100)
						// 分发/触发某个事件
						const event = new CustomEvent('click', { detail: i })
						btn1.dispatchEvent(event)
					}
				},
				false
			)

			function delay(ts) {
				return new Promise((resolve, reject) => {
					// 内部执行异步任务
					setTimeout(() => {
						resolve()
					}, ts)
				})
			}

			function sum(a, b) {
				return a + b
			}

			sum(1, 2)

			// 在第二次执行函数时，无法取得上一次的数据
			sum(2, 3)
		</script>
	</body>
</html>
科学电子佛
关注
专栏目录
节流防抖函数
派大星儿的博客
06-17 541
概念： debounce 防抖 、 throttle 节流 节流 节流的原理很简单： 如果你持续触发事件，每隔一段时间，只执行一次事件。 根据首次是否执行以及结束后是否执行，效果有所不同，实现的方式也有所不同。 我们用 leading 代表首次是否执行，trailing 代表结束后是否再执行一次。 关于节流的实现，有两种主流的实现方式，一种是使用时间戳，一种是设置定时器。 使用时间戳： 让我们来看第一种方法：使用时间戳，当触发事件的时候，我们取出当前的时间戳，然后减去之前的时间戳(最一开始值设为 0 )，如
Java版的防抖(debounce)和节流(throttle)
Nothing is impossible to a willing heart.
02-21 1313
概念 防抖(debounce) 当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定时间到来之前，又触发了事件，就重新开始延时 节流(throttle) 当持续触发事件时，保证在一定时间内只调用一次事件处理函数，意思就是说，假设一个用户一直触发这个函数，且每次触发小于既定值，函数节流会每隔这个时间调用一次 区别 防抖是将多次执行变为最后一次执行 节流是将多次执行变为每隔一段时间执行 Java实现 防抖(debounce) public class DebounceTask {
java实现debounce_Java版的防抖(debounce)和节流(throttle)
weixin_42107374的博客
02-26 391
概念防抖(debounce)当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定时间到来之前，又触发了事件，就重新开始延时节流(throttle)当持续触发事件时，保证在一定时间内只调用一次事件处理函数，意思就是说，假设一个用户一直触发这个函数，且每次触发小于既定值，函数节流会每隔这个时间调用一次区别防抖是将多次执行变为最后一次执行，节流是将多次执行变为每隔一段时间执行...
函数防抖与函数节流
Dark_programmer的博客
03-09 375
函数防抖与节流是很相似的概念，但它们的应用场景不太一样。 我们先从概念上深刻理解它们。 概念 函数防抖（debounce） 函数防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。 简单的说，当一个动作连续触发，则只执行最后一次。 如果有人进电梯（触发事件），那电梯将在10秒钟后出发（执行事件监听器），这时如果又有人进电梯了（在10秒内再...
java script 防抖和节流
PYPMY的博客
07-01 158
文章目录 概念 防抖：就是一定时间内，只会执行最后一次任务。 节流：就是一定时间内，只执行一次。 防抖 防抖函数的封装使用 节流 节流函数的封装使用 防抖 <button id="debounce">点我防抖！</button> $('#debounce').on('click', debounce()); function debounce() { let timer; ...
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
10-14
JavaScript的节流（throttle）和防抖（debounce）是优化用户体验和提高应用性能的重要技术手段，特别是在处理频繁触发的事件时，如输入搜索、滚动事件或点击事件。这两种技术的主要区别在于它们如何控制事件处理函数...
通过实例学习React中事件节流防抖
10-16
在React开发中，高效地处理用户输入和页面交互是非常重要的，而事件节流（throttling）和防抖（debouncing）技术就是用来优化这种处理的关键策略。它们可以帮助我们在高频率的事件触发下，减少不必要的计算和DOM操作...
防抖/节流(java)
hijunmeng的专栏
02-20 1639
boolean exist=false; if(!exist){ exist=true; GlobalInit.getInstance().getScheduledThreadPoolExecutor().schedule(()->{ WLogUtil.i("123456","ddd:"); exist=false
Javasript节流与防抖
Sponge_bob_的博客
09-21 182
防抖 节流
防抖与节流
qq_41248310的博客
11-13 157
防抖：每次触发事件时都取消之前的延时调用方法 <buttonid="btn">测试</button> <script> function debounce(fn) { let timeout = null; // 创建一个标记用来存放定时器的返回值 return function () { clearTi...
节流与防抖
qq_58340302的博客
02-24 244
节流与防抖都是作为页面性能优化的策略，为了限制函数的执行频率，节省计算资源，优化函数因触发过多响应速度跟不上页面出现的堵塞卡顿现象。
防抖和节流
weixin_30455661的博客
03-15 77
一 防抖（debounce） 所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。 防抖函数分为非立即执行版和立即执行版。 1.非立即执行 （非立即执行版的意思是触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。）function debounce(func, wait...
搞清楚节流和防抖
weixin_33872660的博客
05-05 431
节流（throttle）和防抖（debounce）是前端面试中非常高频的一道面试题，在实际项目开发中，也有很多实用场景，最后一次梳理这两个概念。 节流 规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效。 就像一个水龙头在滴水，可能一次性会滴很多滴，但是我们只希望它每隔 1000ms 滴一滴水，保持这个频率，即我们希望函数在以一个固定的频率重复调用；因此这个方法比...
防抖节流源码实现
学习随笔
04-10 708
关于防抖节流基础介绍及基础实现参见上篇博客：函数防抖与节流，本节为扩展功能源码 防抖源码封装： <!DOCTYPE html> <html> <head> <title></title> </head> <body> <input type="text" name=""> <button&g...
JavaWeb（8）——前端综合案例2（节流和防抖）
白白白鲤鱼的博客
08-01 805
JavaWeb（8）——前端综合案例2（节流和防抖）
Java中流分类及节点流、缓冲流底层源码解析
makabaka的博客
04-07 597
Java中流分类及节点流、缓冲流底层源码解析Java中文件读写及流分类Java中对磁盘文件的读写操作过程流分类节点流、缓冲流底层源码解析节点流底层源码解析（以文件复制为例）缓冲流底层源码解析（以文件复制为例） Java中文件读写及流分类 Java中对磁盘文件的读写操作过程 在Java中对磁盘文件进行读写操作时，一般分为五步走： ①创建文件对象（File类的对象） 目的是在内存层面指明磁盘中文件的路径。解释：创建该文件对象时，调用构造器传入一个字符串路径，程序运行会加载到内存，属于该文件对象属于内存层面的文
前端性能优化之防抖与节流
YangCJ_的博客
04-08 246
防抖：任务频繁触发的情况下，只有任务触发的间隔超过制定的时间间隔的时候，任务才会被执行。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-sc...
resize 节流防抖
最新发布
08-12
- *3* [js节流防抖应用场景,以及在vue中节流防抖的具体实现操作](https://blog.csdn.net/yetaodiao/article/details/127371795)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值