防抖与节流

关于防抖和节流

防抖（debounce）：当短时间触发一个事件多次时，只执行一次

非立即执行

debounce(fn,wait){

 var timer = null;
  return function(){
    clearTimeout(timerId);
    timer = setTimeout(() => {
      fn.apply(this,arguments)
    },wait)
  }

}

立即执行

function debounce_2(fn,wait){
  var timerId = null;
  var flag = true;
  return function(){
    clearTimeout(timerId);
    if(flag){
      fn.apply(this,arguments);
      flag = false
      }
    timerId = setTimeout(() => { flag = true;fn.apply(this,arguments)},wait)
  }
}

节流（throtting）：设置一个响应周期，在响应周期结束后执行一次（相当于定期响应）

非立即执行

function throttle_1(fn,wait){
  var flag = true;
  return function(){
    if(flag == true){
      flag = false
      var timer = setTimeout(() => {
        fn.apply(this,arguments)
        flag = true
      },wait)
    }
  }
}

立即执行

function throttle_2(fn,wait){
  var flag = true;
  var timer = null;
  return function(){
    if(flag) {
      fn.apply(this,arguments);
      flag = false;
      timer = setTimeout(() => {
        flag = true
      },wait)
    }
  }
}

由于防抖与节流都使用了闭包，那么就顺便谈一谈对闭包的理解闭包