防抖和节流，节流和防抖，是不是经常让你怀疑谁是谁非？乘坐电梯，如果有人进入电梯（触发事件），电梯门会等待5秒后关闭，如果在等待期间有人按下电梯进入（5秒内再次触发事件），电梯门会再次等待5秒，直到最后一个人进入电梯，等待5秒后电梯门关闭。这就是我们生活中遇到的防抖，那什么是节流呢？玩过游戏的朋友都知道，游戏中技能的使用是有冷却时间的。即使一直按技能，在规定时间内也只能触发一次。这是节流。防抖和节流是前端优化中经常遇到的知识点，抓紧小板凳和我一起开始接下来的学习吧！功能防抖（debounce）1.原理当事件不断被触发并且在规定时间内没有再次调用该事件时，事件处理函数将被执行一次。如果在指定时间内再次调用该事件，则重新开始计时。2.使用场景按钮提交场景：防止多个提交按钮，只执行最后一次提交。搜索框联想词：只发送最后输入结果的请求。执行windowresize和scroll事件时：只计算最后执行的结果。输入框内容校验：只校验最后一次输入的内容。functiondebounce(func,wait,immediate){lettimer;letdebounced=function(){let_this=this;让args=参数；清除超时（计时器）；如果（立即）{letexecuteNow=!timer;timer=setTimeout(function(){timer=null;},等待);如果（立即执行）{功能。应用（_this，参数）；}}else{timer=setTimeout(function(){func.apply(_this,args)},wait);}debounced.cancel=function(){clearTimeout(timer);定时器=空；}}returndebounced;}3.使用immediate参数控制函数是否立即执行。如果函数立即执行，则立即调用；如果函数被延迟执行，上下文和参数被缓存并放在被延迟的函数中执行。定时器启动后，只要定时器仍处于活动状态，每次触发功能时都会重新启动定时器。一旦事件没有触发，定时器超时，事件函数执行一次，定时器重置为空，可以再次点击。函数节流（throttle）1.原理当事件不断触发时，保证在指定时间内调用一次事件处理函数。如果该功能在单位时间内被触发多次，则只有一次有效。2.利用场景DOM元素的拖拽功能实现：一个时间段获取一个位置并进行计算，防止超高频触发位置变化。执行windowresize和scorll事件时：只计算最后执行的结果。3、时间戳法：当一个事件被触发时，我们取出当前的时间戳，然后减去之前的时间戳。如果大于设置的时间段，则执行函数，然后将时间戳更新为当前时间戳；如果小于则不执行。这样第一个事件立即执行，最后一个事件不执行。函数节流阀（函数，等待）{let_this，args；让preTime=0;返回函数（）{_this=this;args=参数；让现在=新日期（）.valueOf（）;if(now-preTime>wait){func.apply(_this,args);前时间=现在；}}}定时器方法：当触发事件时，我们设置一个定时器，当再次触发事件时，如果定时器存在，则不会执行，直到定时器执行完后，执行函数，定时器清除，以便可以设置下一个定时器。这样就不会立即执行第一个事件，而是执行最后一个事件。functionthrottle(func,wait){let_this,args,timer;返回函数（）{_this=this;args=参数；if(!timer){timer=setTimeout(()=>{timer=null;func.apply(_this,args);},wait);}}}时间戳+定时器方式：使用函数参数实现配置项（leading:boolean,trailing:boolean），控制第一次触发事件是否立即触发，最后一次触发是否触发事件。functionthrottle(func,wait,options){let_this,args,timer;让preTime=0;如果（！选项）选项={}；返回函数（）{_this=this;args=参数；letnow=newDate().valueOf();if(options.leading===false&&!preTime){preTime=now;}if((now-preTime)>wait){if(timer){clearTimeout(timer);定时器=空；}func.apply(_this,args);前时间=现在；}elseif(!timer&&options.trailing!==false){timer=setTimeout(()=>{preTime=newDate().valueOf;timer=null;func.apply(_this,args);},wait);}}}功能总结防抖：将多个操作合并为一个操作。原理是维护一个定时器，在延时时间后触发函数，但如果在延时时间内再次触发，则之前的定时器会被取消并重新设置。这样，只能触发最后一个动作。函数节流：让函数在一定时间内只触发一次。原理是通过判断是否到一定时间来触发函数。两者的区别：无论事件触发的频率如何，函数节流都会保证事件处理函数在指定时间内执行一次，而函数防抖只会在最后一个事件后触发一个函数。青云技术平台与服务部作者林茂富礼随时关注“青云技术社区”公众号，添加“青在”微信qingcloud-community，加入技术交流群，就有机会获得价值139元《JavaScript 权威指南 （原书第7版）》。颁奖典礼“TheRhinoBook”已成为JavaScript程序员公认的权威指南。以其内容完整、讲解详尽、实例数量多、针对性强而深受读者欢迎。这部杰作主要涵盖了JavaScript语言本身和Web浏览器实现的JavaScriptAPI。抽奖说明奖品：技术书籍《JavaScript 权威指南 （原书第7版）》2活动时间：即日起至2021年8月11日16:00活动自动抽奖后，请在48小时内联系“青在”微信qingcloud-community留言领取奖品信息。
