防抖

最新推荐文章于 2022-08-06 21:42:28 发布

小可爱雪呀

最新推荐文章于 2022-08-06 21:42:28 发布

阅读量282

点赞数

本文链接：https://blog.csdn.net/zxswg/article/details/109404308

版权

本文介绍了JavaScript中的防抖技术，主要用于优化在连续触发事件时的处理方式。通过设置延迟时间，在最后一次事件触发后执行处理函数，例如在输入框搜索查询或浏览器窗口resize时。文中提供了具体的实例代码，展示了如何实现防抖函数，并通过`clearTimeout`清除定时器来确保只执行最后一次的事件处理。

摘要由CSDN通过智能技术生成

1.定义–最后一次事件触发时再执行处理函数

当一个事件持续触发时，我们期望在最后一次事件触发时再执行事件处理函数。
使用到清空定时器 clearTimeout(timer)

2.使用场景

在连续触发事件的场景中，仅仅需要在最后一次事件触发时执行事件处理函数，使用防抖。比如根据输入框内容进行搜索查询、浏览器窗口resize后重新渲染页面等。

3.实例代码

<!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秒触发
            
			//每次点击都会触发debounce函数中function函数 初始点击时 timer为null 为timer设置定时器 延迟delay秒之后会执行fn函数  但如果持续点击按钮1 每次进入function函数都会先清空timer的定时器 定时器重新开始计时 直到delay秒后不再点击按钮1 执行fn函数  从而实现防抖功能 
			function debounce(fn, delay) {
				let timer = null

				// 每次click触发时 执行该函数
				return function () {
					// 只要触发点击，那就清理掉上次准备要执行的handler定时任务
					clearTimeout(timer)
					
					timer = setTimeout(() => {
                        //定时器执行机制 延迟delay 秒之后才会执行fn函数
						fn()
					}, delay)
				}
			}

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

			sum(1, 2)

			// 在第二次执行函数时，无法取得上一次的数据
			sum(2, 3)
		</script>
	</body>
</html>

小可爱雪呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
防抖

1.定义–最后一次事件触发时再执行处理函数当一个事件持续触发时，我们期望在最后一次事件触发时再执行事件处理函数。使用到清空定时器 clearTimeout(timer)2.使用场景在连续触发事件的场景中，仅仅需要在最后一次事件触发时执行事件处理函数，使用防抖。比如根据输入框内容进行搜索查询、浏览器窗口resize后重新渲染页面等。3.实例代码<!DOCTYPE html><html lang="en"> <head> <meta charset=
复制链接

扫一扫