防抖和节流

防抖：动作绑定事件，动作发生一定时间后触发事件，在这段时间内，如果该动作又发生，则重新等待一定时间才触发事件。(即：一个事件触发后在单位时间内，如果发生重复触发同一个事件，则取消上一次的事件调用，并重新计时）
场景：点击按钮发送请求，搜索时自动匹配，自动保存，Debouncing a resize/scroll event

//基础
function debounce(func, time){
  let timer = null;
  return () => {
 // fn.apply(this, ags)  apply分情况：=>: this指向方法内的this，如果不是=>,指向window
    timer = setTimeout(() => {
      func.apply(this, arguments)
    },time);
  }
}
//是否首次立刻执行
/**
* @description 一直调用callback，callback就不会执行
*/
function debounce(callback, timeout, immediate){
  let timer;
  return function(){
    const context = this;  //保证执行上下文
    const args = arguments;  //记录传参
    const later = function(){
      timer = null;   //重置为初始状态
      if(!immediate) callback.apply(context, args); //设置为尾部调用才延时触发
    }
    const callNow = immediate && !timer;  //如果确认允许首部调用，且首次调用，那么本次立即调用
    clearTimeout(timer);  //杀掉上次计时器，重新记时
    timer = setTimeout(later, timeout); //过了时间触发
    callNow && callback.apply(context, args);  //首次调用立即触发
    
  }
}

节流：动作绑定事件，动作发生之后一段时间后触发事件，在这段时间内，如果动作又发生，则无视该动作，直到事件执行完后，才能重新触发。（即：单位时间内，如果发生重复触发同一事件，则忽略湖面触发的事件，直到第一次的事件的计时结束）（单位时间内只能执行一次）
场景：抢票，提交数据，切换，轮播，动画

//基础
function throtte(func, time){
  let activeTime = 0;
  return () => {
    const current = Date.new();
    if(current - activeTime > time) {
      func.apply(this, arguments);
      activeTime = Date.now();
    }
  }
}
//间隔时间反转标志位
function throttle(callback, timeout){
  let disable;
  return function(){
    const context = this;
    const args = arguments;
    if(!disable){
      callback.apply(context, args);
      disable = true;
      setTimeout(_ => disable = false, timeout);
    }
  }
}

调用：
sayHi(){
  console.log("防抖")；
}
debounce(sayHi, 300)