防抖节流原理

最新推荐文章于 2025-02-25 11:51:54 发布

你一定要努力，但千万别着急

最新推荐文章于 2025-02-25 11:51:54 发布

阅读量177

点赞数

本文链接：https://blog.youkuaiyun.com/qq_37330613/article/details/115735865

版权

本文介绍了JavaScript中的防抖和节流两种技术，用于优化高频率事件触发下的函数执行。防抖确保在短时间内连续触发时不执行，而节流则确保在设定时间间隔内只执行一次。通过实例展示了防抖和节流的实现原理及应用场景。

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

<div 
	id="content" 
	style="height:15000px;
		   line-height:15000px;
		   text-align:center; 
		   color: #fff;
		   background-color:#ccc;
		   font-size:80px;"
>

相同点：防止函数多次调用
不同点：
防抖：一直触发函数且每次触发的间隔小于 wait 则不会执行
节流：每隔一段时间执行一次

var num = 1
var content = document.getElementById('content')
function count() {
	content.innerHTML = num++
	console.log(content.innerHTML) 
} 
// content.onmousewheel = count // 无防抖 无节流
content.onmousewheel = debounce(count, 1000) // 防抖
content.onmousewheel = throttle(count, 1000) // 节流
			
// 防抖
/*
	 **一直触发函数 且每次触发的间隔小于 wait 则不会执行**
 * */
function debounce(fn, wait) {
	var timeout = null // 创建一个标记用来存放定时器的返回值
	return function() {
		clearTimeout(timeout) // 取消当前的定时器 重新开始计时
		// timeout = setTimeout(fn, wait)
		timeout = setTimeout(() => { // 又创建一个定时器  一段时间之内不会执行
			fn.apply(this, arguments)
		}, wait)
	}
}
			
// 节流
/*
 高频事件触发，但在n秒内只会执行一次
 * */
function throttle(fn, wait) {
	let flag = true // 就执行一次 给一个开的锁
	return function() {
		if (!flag) return // 锁关的时候 无法触发函数
		flag = false // 进来后先把锁关上
		setTimeout(() => { // 设置一段时间后 触发
			fn.apply(this, arguments)
			flag = true // 事件触发完毕之后 再把锁打开
		}, wait)
	}
}