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

实现去抖和节流功能

时间:2023-03-27 15:51:44 JavaScript

1。连续调用该函数时,空闲时间必须大于等于该函数定义的等待时间,任务才会执行。该函数称为去抖动函数。2.当这个函数被连续调用时,每一次最多执行一次任务的函数称为节流函数。这里模拟lodash的防抖功能_.debounce(func,[wait=0],[options=]),先说说lodash防抖功能输入选项的配置项:options.leading和|或options.trailing决定延迟前后如何触发(注意:是先调用再等待还是先等待再调用)。使用提供给去抖函数的最后一个参数调用func。对debounced函数的后续调用将返回最后一次func调用的结果。注意:如果leading和trailing选项都为true,func允许尾随调用的条件是:debounce方法在等待期间被多次调用。简单的说,lodash的防抖功能,当options.leading为true,options.trailing为false的时候,我们需要用到平时需要用到的节流功能。当options.leading为false,options.trailing为true时,就是我们平时需要用到的防抖功能,我自己模拟了一下,代码如下/****@param{function}func防抖需要执行的防抖功能*@param{number}wait等待时间,单位毫秒*@param{object}options{leading:true表示在等待时间开始之前执行防抖功能,trailing:true表示执行等待时间开始后防抖功能}*/functiondebounce(func,wait=500,options){if(typeoffunc!=="function")thrownewError("funcmustbefunction");让定时器=空;const{leading=false,trailing=true}=选项||{}constres=function(...argus){constself=this;如果(!leading&&trailing){clearTimeout(timer);timer=setTimeout(()=>{func.apply(self,argus);timer=null;},wait)}if(leading){if(!timer){func.应用(自我,阿格斯);计时器=setTimeout(()=>{timer=null},wait)}else{//如果有定时器,说明在等待期间防抖功能已经执行完毕if(trailing){//如果为true,则防抖功能会执行等待等待时间后执行clearTimeout(timer);timer=setTimeout(()=>{func.apply(self,argus);timer=null},wait)}}}//设置防抖后取消功能res.cancel=function(){如果(计时器){clearTimeout(计时器);定时器=空;}}//设置防抖功能立即执行函数res.flush=function(){if(timer){clearTimeout(timer);定时器=空;func.apply(自我,阿格斯);}}}returnres;}这里特别注意,我写的内置cancel和flush方法只对options.leading=false和options.trailing=true有效,其他情况没有逻辑判断和处理,如果你们了解其他规则和机制,可以给我一些建议,哈哈哈!