什么是节流防抖
节流:故名思意就是节省流量,防止某个事件的多次调用
防抖:防止抖动,也是为了防止一个事件被多次调用
为什么要使用节流防抖呢?
对于一系列快速触发的事件,特别是发送网络请求的时候,如果每次滚动屏幕都发送一次请求,那么短时间内可能发送很多次的请求,这样会造成比较大的网络开销,同时也会给浏览器渲造成压力,节流防抖的目的就是减少这些事件的触发次数
两者的区别
节流:在一段时间间隔内若有多次触发,则后面触发时会把前面的触发事件销毁,执行后面的触发,实际触发了很多次,但是只有最后一次有效果,看上去就像是只触发了一次
防抖:在一段事件内只触发一次,第一次事件触发后,会短暂的将事件锁死,时间过后才会事件才会被再次释放
下面是代码实现
节流模拟
下面模拟是使用but按钮点击发送网络请求,点击按钮时会触发点击事件的回调函数,回调函数就是自己定义的节流函数,函数的执行过程如下:
debounce函数中定义了一个timer变量用来存储定时器
1.点击按钮进入debounce函数
1.1若在时间间隔内是第一次执行点击事件,此时timer为空,于是给timer绑定一个定时器,在delay时间后执行callback函数
2.1若在时间间隔内不是第一次点击按钮,此时timer已经不为空,则会进入if分支,清除前面的定时器,重新绑定定时器
直到在触发事件后的delay时间里没有重新触发事件,则回调函数才会正真的执行
letbut=document.getElementById("but");
but.addEventListener('click',debounce(send,2000))
functiondebounce(callback,delay){
//设置一个包内的变量
lettimer;
return function() {
//设置一个定时器,如果定时器已经存在则清空定时器
if(timer){
clearTimeout(timer)
}
console.log("点击按钮了")
//重新绑定定时器
timer=setTimeout(callback,delay)
}
}
functionsend(){
console.log("点击按钮发送avax请求")
}
防抖模拟
下面时模拟滚动屏幕来执行事件,滚动屏幕会触发事件,定义了一个变量来作为初始的事件,函数执行过程如下:
1.滚动屏幕,触发防抖函数
1.1若是时间间隔内第一次触发事件,此时事件与上一次的事件差大于delay,进入if分支,执行回调函数的同时更新time(这里涉及到js的执行机制,定时器是异步函数,更新time是同步操作)
2.1若在时间间隔内不是第一吃触发事件,则不会进入if分支,自然也不会执行回调函数,这样就实现了在时间间隔内只执行一次回调的效果。
//使用防抖函数解滑动多次调用的问题
window.onscroll=throttle(scrollP,1000)
functionscrollP(){
console.log("屏幕滑动了,重新发送请求")
}
//防抖函数,只调用一次
functionthrottle(callback,delay){
lettime=0;
returnfunction(){
if(newDate()-time>delay){
console.log("滚动事件触发了")
setTimeout(callback,delay);
}
time=newDate();
}
}
全部代码:
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1{
height: 1800px;
background-color: rgb(167, 49, 49);
}
.div2{
height: 200px;
background-color: rgb(9, 142, 60);
}
</style>
</head>
<body>
<buttonid="but">发送请求</button>
<divclass="div1">
<divclass="div2"></div>
</div>
<script>
//一个点击按钮的节流函数
letbut=document.getElementById("but");
but.addEventListener('click',debounce(send,2000))
functiondebounce(callback,delay){
//设置一个包内的变量
lettimer;
return function() {
//设置一个定时器,如果定时器已经存在则清空定时器
if(timer){
clearTimeout(timer)
}
console.log("点击按钮了")
//重新绑定定时器
timer=setTimeout(callback,delay)
}
}
functionsend(){
console.log("点击按钮发送avax请求",newDate())
}
//使用防抖函数解滑动多次调用的问题
window.onscroll=throttle(scrollP,1000)
functionscrollP(){
console.log("屏幕滑动了,重新发送请求")
}
//防抖函数,只调用一次
functionthrottle(callback,delay){
lettime=0;
returnfunction(){
if(newDate()-time>delay){
console.log("滚动事件触发了")
setTimeout(callback,delay);
}
time=newDate();
}
}
</script>
</body>
</html>
注意点:
可以看到,两者看上去效果相同,实际上的callback的调用次数并不一样,这里我加了两个console语句测试了一下。
实际上在节流中,执行函数的语句不在if中,在触发事件后callback每次都被放入的定时器中,只不过在定时器还没有执行完就被清除了
在防抖中,执行callback的语句在if中,每次触发事件,只是更新了上次触发的时间time,并没有将callback放在表达式中,因此实际上在时间间隔内也就是只执行了一次。
学习节流防抖还需要对闭包有一定的了解,以上就是我对节流与防抖的理解,本人资历山尚浅,如有错误请指出。