防抖动与节流

防抖动

其核心内涵在于延迟处理，也就是将一系列的事件处理程序全部延迟，保障推送进来的第一次事件处理

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()); 
    }
  }
});

这是一个节流阀的案例
、