函数防抖和函数节流

函数防抖（debounce）

当调用动作过n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间

如果有人进电梯（触发事件），那电梯将在10秒钟后出发（执行事件监听器），这时如果又有人进电梯了（在10秒内再次触发该事件），我们又得等10秒再出发（重新计时）

函数节流（throttle） 

预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期 

保证如果电梯第一个人进来后，10秒后准时运送一次，这个时间从第一个人上电梯开始计时，不等待，如果没有人，则不运行

 函数防抖（debounce）

function _debounce(fn,wait){
    var timer = null;
    return function(){
        clearTimeout(timer)  // 清除未执行的代码，重置回初始化状态
        timer = setTimeout(()=>{
            fn()
        },wait)
    }
}

function fn(){
    console.log(1)
}
window.onscroll = _debounce(fn,500)

优化

       function _debounce(fn,wait,time){
            var timer = null;
            var pre = null;
            return function (){
                var now = +new Date();
                if(!pre) pre = now
                 if(now - pre > time){
              //当上一次执行的时间与当前的时间差大于设置的执行间隔时长的话，就主动执行一次
                    clearTimeout(timer);
                    fn();
                    pre = now;
                }else{
                    clearTimeout(timer);
                    timer = setTimeout(function(){
                        fn();
                    },wait)
                }
            }
        }
        function fn(){
            console.log(1)
        }
        
        window.onscroll = _debounce(fn,500,2000)

函数节流（throttle）

      function _throttle(fn, time) {
           let timer, firstTime = true;
           return function (){
               if(firstTime) {
                   fn();
                  firstTime = false
               }
               if(timer){return false}
                timer = setTimeout(function(){
                    clearTimeout(timer)
                    fn();  
                    timer = null    
                },500)
           }
       }
       function fn(){
    console.log(1)
}
window.onscroll = _throttle(fn,500)