防抖動與節流

防抖動

其核心內涵在於延遲處理，也就是將一系列的事件處理程序所有延遲，保障推送進來的第一次事件處理

var debounce　 = function(fn,delay,mustRunDelay){
    var timer = null;
    var t_start;
    return function(){
        var context = this;
        var args = arguments;
        var t_curr = +new Date();
        clearTimeout(timer);
        if(!t_start){
            t_start = t_curr;
        }
        if(t_curr - t_start >= mustRunDelay) {
            fn.apply(context,args);
            t_start = t_curr
        } else {
            timer = setTimeout(function(){
                fn.apply(context,args);
            },delay);
        }
    } 
}

使用方法
window.onresize = debounce(resizeDiv,50,100);

//onresize爲事件發生對象
//resizeDiv爲要執行的函數
//50爲定時器的函數
//1000多長時間須要執行一次

函數節流

節流函數容許一個函數在規定的時間內只執行一次。
它和防抖動最大的區別就是，節流函數無論事件觸發有多頻繁，都會保證在規定時間內必定會執行一次真正的事件處理函數。

$(document).ready(function(){
  $(document).on('scroll', _.throttle(function(){
    check_if_needs_more_content();
  }, 300));

  function check_if_needs_more_content() {     
    pixelsFromWindowBottomToBottom = 0 + $(document).height() - $(window).scrollTop() -$(window).height();
    if (pixelsFromWindowBottomToBottom < 200){
      // Here it would go an ajax request
      $('body').append($('.item').clone()); 
    }
  }
});

這是一個節流閥的案例
、