引言
相信在学习前端的小伙伴可能遇到过防抖节流这个感念,如果你还没有理解他们或者是他们的区别,这篇文章一定会对你有帮助,下面由我来带你完全搞懂他们。
什么是防抖节流
防抖
在一定时间内,只在开始时刻执行一次,如果在这个时间段有连续操作,会在操作后重新计时。
节流
在一定时间内,只在开始时刻执行一次,始终不会重新计时。
实现防抖节流
光看上面的概念,你可能还不能理解,下面由我来带你们使用代码实现。
防抖实现
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
打印一次,如果存在连续操作,每次打印的时间会更长。
防抖节流的作用
防抖的作用
防抖的作用,顾名思义,就是防止用户界面的抖动。用户界面为什么会抖动呢,就是因为我们过于频繁的操作,比如:现在网络不好,我一直连续点击某个按钮,等网络恢复后,你会发现界面突然出现一连串的反馈,这种体验就很不好。
节流的作用
节流同样顾名思义,减少资源的消耗,那么如何减少的呢,就是通过减少用户操作的有效操作次数,在某个时间段内只有一次生效,也是很好理解的。
结尾
相信看完这篇文章的小伙伴一定对防抖节流有了很好的理解,以后再遇到他们或者面试时遇到,就可以轻轻松松看懂和回答了。希望这篇文章能给你带来帮助,感谢你的观看,如果有问题或者疑惑,欢迎提出和分享。