使用 javascript 编写防抖和节流函数

Melody_lw

已于 2022-04-19 19:26:10 修改

阅读量105

点赞数

文章标签： javascript

于 2022-04-19 19:09:56 首次发布

本文链接：https://blog.csdn.net/qq_61233877/article/details/124280494

版权

引言

相信在学习前端的小伙伴可能遇到过防抖节流这个感念，如果你还没有理解他们或者是他们的区别，这篇文章一定会对你有帮助，下面由我来带你完全搞懂他们。

什么是防抖节流

防抖

在一定时间内，只在开始时刻执行一次，如果在这个时间段有连续操作，会在操作后重新计时。

节流

在一定时间内，只在开始时刻执行一次，始终不会重新计时。

实现防抖节流

光看上面的概念，你可能还不能理解，下面由我来带你们使用代码实现。

防抖实现

function debounce(func,timeout=2000){  
	let timer=0
		return function(){
		  // 如果 timer 为非，说明是第一次执行或者计时结束，此时函数应当执行函数并在执行后开启计时来重置timer
			if(!timer) {func();timer=setTimeout(()=>{timer=0},timeout)}
			// 如果 timer 有值，说明计时还未结束，而此时用户进行了操作，应该重置清空timer的计时时间
			else {
			      clearTimeout(timer)
			      timer=setTimeout(()=>{timer=0},timeout)
			    }
		}
}

节流实现

function throttle(func,timeout=2000){
	let timer=0
		return function(){
		  if(!timer) {func();timer=setTimeout(()=>{timer=0},timeout)}
		}
}

对比

通过代码也可以很清楚的看懂防抖节流的区别。就是防抖比节流多了一个重置计时的操作。

效果测试

<body>
	<div id="debounce" 
	style="width: 200px;height: 200px;
	background-color: aquamarine;"
	>
	防抖
	</div>
	<br>
	<div id="throttle" 
	style="width: 200px;height: 200px;
	background-color: aquamarine;"
	>
	节流
	</div>

<script>
   function fun(){console.log(1)}
	document.getElementById('debounce').onmousemove=debounce(fun)
	document.getElementById('throttle').onmousemove=throttle(fun)
</script>
</body>

在对应的 div 内移动鼠标，你就会进一步了解他们的区别，你会发现他们的效果和我上面的概念描述的一样。节流处每2s打印一次。防抖处就不一定了，但是最少要2s打印一次，如果存在连续操作，每次打印的时间会更长。

防抖节流的作用

防抖的作用

防抖的作用，顾名思义，就是防止用户界面的抖动。用户界面为什么会抖动呢，就是因为我们过于频繁的操作，比如：现在网络不好，我一直连续点击某个按钮，等网络恢复后，你会发现界面突然出现一连串的反馈，这种体验就很不好。

节流的作用

节流同样顾名思义，减少资源的消耗，那么如何减少的呢，就是通过减少用户操作的有效操作次数，在某个时间段内只有一次生效，也是很好理解的。

结尾

相信看完这篇文章的小伙伴一定对防抖节流有了很好的理解，以后再遇到他们或者面试时遇到，就可以轻轻松松看懂和回答了。希望这篇文章能给你带来帮助，感谢你的观看，如果有问题或者疑惑，欢迎提出和分享。