浅谈函数防抖和节流

最新推荐文章于 2025-11-24 02:17:16 发布

原创最新推荐文章于 2025-11-24 02:17:16 发布 · 188 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

性能优化专栏收录该内容

2 篇文章

订阅专栏

什么是防抖、节流 ?

防抖和节流是针对响应跟不上事件触发频率，而影响浏览器性能这类问题的两种解决方案。 像鼠标移动事件onmousemove,滚动滚动条事件onscroll,窗口大小改变事件onresize，这类我们无法控制触发频率的事件，瞬间的操作都会导致这些事件会被高频触发。如果事件的回调较为复杂，就会导致响应跟不上触发，进而出现页面卡顿，假死现象。在实时检查输入时，如果我们绑定onkeyup事件发请求去服务器价差，用户输入过程中，事假输入过程中，事件的触发频率也会很高，会导致大量的请求发出，响应速度会大大跟不上触发。

防抖

理解： 在触发事件时，不去立即执行函数，而是在达到期望时限后执行。

案例： 搜索输入时，用户输入停止两秒钟以后，才会发起搜索的ajax请求，防止发送大量ajax请求

<body>
	<input type="text" id="inp" name="">
	<script type="text/javascript">
		// 搜索输入： 用户停止两秒钟以后，才会发起搜索的ajax请求
		var inp = document.getElementById("inp");
		function ajax(){
			console.log('发送ajax请求')
		}
		inp.oninput = debounce(ajax,2000)
		//fn:需要防抖的函数  delay：期望时限 
		function debounce(fn,delay){
			let timer = null; //借助闭包
			return function(){
				if(timer){
				//进入该分支，说明当前正在一个计时过程中，并且又触发了相同事件，所以清除定时器，重新开始计时
					clearTimeout(timer);
				}
				timer = setTimeout(fn,delay)
			}
		}
	</script>
</body>

节流

理解： 频繁触发事件时，只会在指定的时间段内执行回调，即触发事件间隔大于等于指定的时间才会执行回调函数。

案例： 抢礼品时，要控制用户抢到的数量，不能认同一个人抢到大量的礼品

<body>
	<div id="div">0</div>
	<button id="btn">click</button>
	<script type="text/javascript">
		// 1s 只能点击一次 
		var div = document.getElementById("div");
		var btn = document.getElementById("btn");
		btn.onclick = throttle(fun,1000)
		function fun(){
			div.innerHTML = +div.innerHTML + 1;
		} 
		function throttle(fun,delay){
			let valid = true;
			console.log(valid)
			return function(){
				console.log(valid)
				if(!valid){  
				//期望时限内点击第二次及以后就进入此分支，跳出函数
					return false
				}
				valid = false;
				setTimeout(()=>{
					fun();
					valid = true;
					console.log(valid)
				},delay)
			}
		}
	</script>