javascript的函数节流

最新推荐文章于 2024-02-26 16:56:39 发布

小秧@

最新推荐文章于 2024-02-26 16:56:39 发布

阅读量197

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/webMinStudent/article/details/121067162

本文深入探讨了JavaScript中的函数节流技术，特别是在处理window.onscroll事件时的应用。通过设置时间差阈值，限制事件的频繁触发，优化性能。文中提供了一个实现节流的示例函数，并详细解释了其工作原理，帮助读者理解如何每100毫秒才执行一次指定函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.javascript的函数节流

2.以window.onscroll事件为例

window.onscroll = function () {
	console.log('触发了...')
}

这样当一次滚动时，一般都会触发 40-60次
函数节流就是需要，将40-60次限制一下，少一点的触发。
那怎么做呢？

每一次触发事件，我们都需要计算一个时间差(上一次触发的时间 - 当前触发的时间)
看这个时间差是否超过我们规定的合理时间
如果超过了，就可以触发
如果没有超过，就需要设置一个定时器，让事件在(还差的时间)里进行触发

const throttle = function (func, wait) {
	let current = 0; // 上一次触发的时间,第一次肯定是0
	let setTimouId = null // 定时器的ID
	return function (...params){
		const time = + new Date() // 当前触发的时间
		const meetTime = wait - (time - current)
		// (time - current) 就是当前触发的时间 - 上一次触发的时间 (就是一个时间差)
		// 我们需要判断这个时间差是否超过我们规定的合理时间 wait
		if (meetTime <= 0) {
			// 小于或 = 0，就是满足了触发时间(条件)。直接触发事件
			func.call(this, ...params)
			// 事件被触发了，我们需要记录这次触发的时间
			current = + new Date() // 记录当前触发的时间
		} else if (!setTimouId) {
			// 只有当定时器还没设置，我们才会重新设置一个定时器.
			setTimouId = setTimeout(() => {
				func.call(this, ...params)
				// 触发完了之后，我们需要记录这次触发的时间
				current = + new Date()
				// 我们也需要，清除这个定时器
				clearTimeout(setTimouId)
				setTimouId = null;
			}, meetTime)
			// 我们这个定时器是，在还差多少时间才会触发的
			// 所以设置定时器触发的时间为 meetTime
		}
	}
}
window.onscroll = throttle(send, 100)
// 我们规定，合理的触发时间为 100毫秒
// 每隔100毫秒，就触发send函数