浅谈JS函数节流防抖
在前端开发中有一部分的用户行为会频繁的触发事件执行，而对于DOM操作、资源加载等耗费性能的处理，很可能导致界面卡顿，甚至浏览器的崩溃。函数节流(throttle)和函数防抖(debounce)就是为了解决类似需求应运而生的。
函数节流(throttle)
函数节流就是预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行。好像水滴攒到一定重量才会落下一样。
场景：
- 窗口调整（resize）
- 页面滚动（scroll）
- 抢购疯狂点击（mousedown）
实现：
functionthrottle(method,delay){
varlast=0;
returnfunction(){
varnow=+newDate();
if(now-last>delay){
method.apply(this,arguments);
last=now;
}
}
}
document.getElementById('throttle').onclick=throttle(function(){console.log('click')},2000);
underscore实现：
_.throttle=function(func,wait,options){
varcontext,args,result;
vartimeout=null;
varprevious=0;
if(!options)options={};
varlater=function(){
previous=options.leading===false?0:_.now();
timeout=null;
result=func.apply(context,args);
if(!timeout)context=args=null;
};
returnfunction(){
varnow=_.now();
if(!previous&&options.leading===false)previous=now;
//计算剩余时间
varremaining=wait-(now-previous);
context=this;
args=arguments;
//剩余时间小于等于0或者剩余时间大于等待时间(本地时间变动出现)
if(remaining<=0||remaining>wait){
if(timeout){
clearTimeout(timeout);
timeout=null;
}
previous=now;
result=func.apply(context,args);
if(!timeout)context=args=null;
}elseif(!timeout&&options.trailing!==false){
timeout=setTimeout(later,remaining);
}
returnresult;
};
};
函数防抖(debounce)
函数防抖就是在函数需要频繁触发情况时，只有足够空闲的时间，才执行一次。好像公交司机会等人都上车后才出站一样。
场景：
- 实时搜索（keyup）
- 拖拽（mousemove）
实现：
functiondebounce(method,delay){
vartimer=null;
returnfunction(){
varcontext=this,args=arguments;
clearTimeout(timer);
timer=setTimeout(function(){
method.apply(context,args);
},delay);
}
}
document.getElementById('debounce').onclick=debounce(function(){console.log('click')},2000);
underscore实现：
_.debounce=function(func,wait,immediate){
vartimeout,args,context,timestamp,result;
varlater=function(){
varlast=_.now()-timestamp;
if(last=0){
timeout=setTimeout(later,wait-last);
}else{
timeout=null;
if(!immediate){
result=func.apply(context,args);
if(!timeout)context=args=null;
}
}
};
returnfunction(){
context=this;
args=arguments;
timestamp=_.now();
varcallNow=immediate&&!timeout;
if(!timeout)timeout=setTimeout(later,wait);
if(callNow){
result=func.apply(context,args);
context=args=null;
}
returnresult;
};
};
函数节流(throttle)和函数防抖(debounce)都是通过延时逻辑操作来提升性能的方法，在前端优化中是常见且重要的解决方式。可以从概念和实际应用中理解两者的区别，在需要的时候选择合适的方法处理。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。