防抖动（debounce ）和 节流阀（throttle ）

 防抖是   将多次执行变为最后一次执行   

 节流是   将多次执行变为每隔一段时间执行 或者说  规定在一个单位时间内，只能触发一次函数

   当页面滚动时 

      使用防抖  只有当页面滚动完成之后  才会进行回调的调用

      使用节流   滚动过程中  就会有间隔的去触发回调

// 防抖
// 首次运行时把定时器赋值给一个变量， 第二次执行时，
//  如果间隔没超过定时器设定的时间则会清除掉定时器， 
//  重新设定定时器， 依次反复， 当我们停止下来时，
//  没有执行清除定时器， 超过一定时间后触发回调函数。
function debounce(fn, delay = 100) {
    var timer = null;
    return function() {
        if (timer) clearTimeout(timer)
        timer = setTimeout(() => {
            fn.apply(this, arguments);
            timer = null
        }, delay)
    }
}

// 节流
// 思路： 第一次先设定一个变量true，
// 第二次执行这个函数时，会判断变量是否true，
// 是则返回。当第一次的定时器执行完函数最后会设定变量为flase。
// 那么下次判断变量时则为flase，函数会依次运行。
function throttle(fn, delay = 100) {
    //首先设定一个变量，在没有执行我们的定时器时为null
    var timer = null;
    return function() {
        //当我们发现这个定时器存在时，则表示定时器已经在运行中，需要返回
        if (timer) return;
        timer = setTimeout(() => {
            fn.apply(this, arguments);
            timer = null
        }, delay)
    }
}


var throttle = function(func, wait) {
    var context, args, timeout, result;
    var previous = 0;
    var later = function() {
      previous = new Date();
      timeout = null;
      result = func.apply(context, args);
    };
    return function() {
      var now = new Date();
      var remaining = wait - (now - previous);
      context = this;
      args = arguments;
      if (remaining <= 0) {
        clearTimeout(timeout);
        timeout = null;
        previous = now;
        result = func.apply(context, args);
      } else if (!timeout) {
        timeout = setTimeout(later, remaining);
      }
      return result;
    };
  };