新手小白,对节流防抖的理解和实现

228 阅读1分钟

1.节流

在一个特定的时间(delay)内,事件只会触发一次,要想触发该事件,间隔时间必须大于delay。

代码实现:

 function throttle(fn,delay){
     let preTime=Date.now();
     return function(){
         let context=this,args=arguments,nowTime=Date.now()
         
         if(nowTime-preTime>=dalay){
             fn.apply(context,args);
             preTime=Date.now()
         }
     }
 }

2.防抖

在一段时间(wait)内,事件在某时刻触发,触发时刻为重新计时为0(T0),下次再次触发,若时间间隔小于

wait,则会在触发时刻重新计时T0,无论触发多少次,只要两次触发时间间隔小于awit,就需要从触发时刻开始重新计时。

要想再次触发该事件,两次间隔时间需大于wait。

代码实现:

function (fn,wait){
    let timer=null
    return function(){
        let context=this,args=arguments
        
        if(timer){
            clearTimeout(timer)
            timer=null
        }
        timer=setTimeout(()=>{
            fn.apply(context,args)
        },wait)
    }
}

\