防抖节流-终极版

183 阅读1分钟

防抖

function debounce(fn, delay) {
  
    var timer = null;

    return function() {
        var arg = arguments;
          
        clearTimeout(timer);
        timer = null;
        
        timer = setTimeout(function() {
            fn.apply(this, arg);
        }, delay);
    }
};

var count = 0;

window.onscroll = debounce(function(e) {
    console.log(e.type, ++count);
}, 500);

节流

  var timer = null;
  var timeStamp = 0;
  
  return function(){
    
     var arg = arguments;
     var now = Date.now();
     var remaining = delay - (now-timeStamp)
     
    if(timeStamp===0){ // 防止前后俩阶段间隔时间太长,timeStamp太小,if条件为true,立马执行了
      timeStamp=now
    }
    
    clearTimeout(timer)
    timer = null
    
    if(now-timeStamp>=delay){
       fn.apply(this,arg)
       timeStamp = now
    }else{
      timer = setTimeout(()=>{
        fn.apply(this,arg);
        timeStamp = 0;
      }, remaining) // 注意,这里不是delay
    }
  }
}