当前位置: 首页 > Web前端 > JavaScript

实现节流和去抖功能

时间:2023-03-27 13:39:57 JavaScript

完整高频题库仓库地址:https://github.com/hzfe/awesome-interview完整高频题库阅读地址:https://febook.hzfe.org/throttling1.基本概念throttle(func,wait)每等待毫秒最多调用一次func。2.应用场景搜索框输入实时关联。监听滚动事件计算位置信息。3.流程图4.写代码functionthrottle(func,wait){letlastTime=0;让定时器=空;返回函数(){if(timer){clearTimeout(timer);定时器=空;}让自己=这个;让args=参数;让nowTime=+newDate();constremainWaitTime=wait-(nowTime-lastTime);如果(remainWaitTime<=0){lastTime=nowTime;func.apply(self,args);}else{timer=setTimeout(function(){lastTime=+newDate();func.apply(self,args);timer=null;},remainWaitTime);}};}Debounce1.基本概念debounce(func,wait)自上次触发后延迟调用func等待毫秒。2、应用场景注册时输入用户名后,查看是否被占用。监听resize事件计算尺寸信息。3.配置4。私有函数debounce(func,wait){lettimer=null;返回函数(){if(定时器){clearTimeout(定时器);定时器=空;}让自己=这个;让args=参数;timer=setTimeout(function(){func.apply(self,args);timer=null;},wait);};}