浅谈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)都是通过延时逻辑操作来提升性能的方法,在前端优化中是常见且重要的解决方式。可以从概念和实际应用中理解两者的区别,在需要的时候选择合适的方法处理。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。