节流和防抖

Posted 2021-03-09 ailingstar

都是解决用户频繁执行某个任务导致的问题

防抖

• 指的是用户触发某动作时，一段时间后执行，比如3s后执行，如果用户多次点击，则重新计时
• 实现思路：设置一个变量lasttime用来记录上次的执行时间，如果现在的时间-上次的时间>等待的时间，则执行任务，否则将lasttime赋值为nowtime,重新计时

const debunde=function(fn,wait){
    /**
             * 防抖：指的是，当某个功能执行时需要隔固定的时间才开始执行，如果持续的点击，则会重新计时
             */
            
            var timer=null
            
            // 使用闭包使得timer一直在内存中
            
            return function(){
                if(timer){
                    //如果没达到时间，则重新即使
                    clearTimeout(timer)
                }
                timer=setTimeout(function(){
                    console.log('被执行了')
                    fn.apply(this,arguments)
                },wait)
                
            }
}

节流

• 指的是，一段时间内用户只能执行一次任务
• 实现思路：setTimeout()

const tr=throttle(fn,wait){
   
     var lasttime=0
    // 闭包使得lasttime常驻内存
    return function(){
        var now=new Date()

        if(now-lasttime>wait){
            lasttime=now
            fn.apply(this,arguments)
    }
}
}