节流

最新推荐文章于 2022-09-20 18:43:12 发布

小可爱雪呀

最新推荐文章于 2022-09-20 18:43:12 发布

阅读量245

点赞数

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

版权

1 定义 —降低事件触发的频率

当一个事件持续触发时，我们期望降低事件触发的频率，事件处理函数还是会触发多次。比如在移动端手机浏览器对onscroll事件不能实时触发，就是在内部做了节流处理。

2.使用场景

在连续触发事件的场景中，需要降低事件触发的频次，使用节流。如上拉加载更多数据、图片懒加载（监听图片元素是否快到可视区域了）等

3.演示代码

<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>节流1</title>
	</head>
	<body>
		<button id="btn1">点击触发</button>
		<script>
			// PC端浏览器对onmousemove onscroll等事件的触发是非常密集，频次非常高。
			// 移动端浏览器对onmousemove onscroll等事件的触发的频次给降低了，也就是内部执行节流处理

			// 节流: 控制事件触发的频率. 在约定的时间内，虽然点击了按钮很多次，但是事件逻辑只触发一次
			const btn1 = document.getElementById('btn1')

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

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

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

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

				// 每次点击都会执行这个函数
				return function () {
					// timer存在，说明当前时间段内，已经有一个fn函数待执行，就阻止当前的点击
					if (timer){
                     //如果timer不存在 就执行下边的定时器函数  如果timer存在 就执行return，下边的定时器不再执行 直到定时器函数结束
                     return
                   }

					// delay秒后执行fn函数
					// 等于 delay秒内没有执行任何的函数逻辑，delay秒后立即执行了fn
					// 等于 在delay秒内只执行了一次fn
					timer = setTimeout(() => {
						fn()
						timer = null
					}, delay)
				}
			}

			//  isEdit:
		</script>
	</body>
</html>

小可爱雪呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
节流

1 定义 —降低事件触发的频率当一个事件持续触发时，我们期望降低事件触发的频率，事件处理函数还是会触发多次。比如在移动端手机浏览器对onscroll事件不能实时触发，就是在内部做了节流处理。2.使用场景在连续触发事件的场景中，需要降低事件触发的频次，使用节流。如上拉加载更多数据、图片懒加载（监听图片元素是否快到可视区域了）等3.演示代码<html lang="en"> <head> <meta charset="UTF-8" /> <meta n
复制链接

扫一扫