您的位置：首页 > 其它

防抖、节流

2018-04-25 11:38 337 查看

防抖（debounce）

作用是在短时间内多次触发同一个函数，只执行最后一次，或者只在开始时执行。

以用户拖拽改变窗口大小，触发resize事件为例，在这过程中窗口的大小一直在改变，所以如果我们在resize事件中绑定函数，这个函数将会一直触发，而这种情况大多数情况下是无意义的，还会造成资源的大量浪费。

这时候可以使用函数防抖来优化相关操作：

1
2
3
4
//普通方案
window.addEventListener('resize',()=>{
console.log('trigger');
})
优化方案：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//debounce函数接受一个函数和延迟执行的时间作为参数
functiondebounce(fn,delay){
//维护一个timer
lettimer=null;
returnfunction(){
//获取函数的作用域和变量
letcontext=this;
letargs=arguments;
clearTimeout(timer);
timer=setTimeout(function(){
fn.apply(context,args);
},delay)
}
}
1
2
3
4
5
6
functionfoo(){
console.log('trigger');
}
//在debounce中包装我们的函数，过2秒触发一次
window.addEventListener('resize',debounce(foo,2000));
在resize事件上绑定处理函数，这时debounce函数会立即调用，实际上绑定的函数时debounce函数内部返回的函数。

每一次事件被触发，都会清除当前的timer然后重新设置超时调用。

只有在最后一次触发事件，才能在delay时间后执行。

我们也可以为debounce函数加一个参数，可以选择是否立即执行函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
functiondebounce(func,delay,immediate){
vartimer=null;
returnfunction(){
varcontext=this;
varargs=arguments;
if(timer)clearTimeout(timer);
if(immediate){
vardoNow=!timer;
timer=setTimeout(function(){
timer=null;
},delay);
if(doNow){
func.apply(context,args);
}
}else{
timer=setTimeout(function(){
func.apply(context,args);
},delay);
}
}
}

节流（throttle）

类似于防抖，节流是在一段时间内只允许函数执行一次。

应用场景如：输入框的联想，可以限定用户在输入时，只在每两秒钟响应一次联想。

可通过时间戳和定时器来实现。

时间戳实现：

1
2
3
4
5
6
7
8
9
10
11
12
varthrottle=function(func,delay){
varprev=Date.now();
returnfunction(){
varcontext=this;
varargs=arguments;
varnow=Date.now();
if(now-prev>=delay){
func.apply(context,args);
prev=Date.now();
}
}
}
定时器实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
varthrottle=function(func,delay){
vartimer=null;
returnfunction(){
varcontext=this;
varargs=arguments;
if(!timer){
timer=setTimeout(function(){
func.apply(context,args);
timer=null;
},delay);
}
}
}
区别在于，使用时间戳实现的节流函数会在第一次触发事件时立即执行，以后每过delay秒之后才执行一次，并且最后一次触发事件不会被执行；而定时器实现的节流函数在第一次触发时不会执行，而是在delay秒之后才执行，当最后一次停止触发后，还会再执行一次函数。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航