js优化之防抖节流

防抖函数

应用场景：
搜索框/滚动条的监听事件处理，防止每输入一个字/滚动屏幕，都会触发事件处理，造成性能浪费。
（一定时间内只能点击一次，多次点击不会触发），实现原理为设置一个定时器，约定在xx毫秒后再触发事件处理，每次触发事件都会重新设置计时器，直到xx毫秒内无第二次操作

参数1为触发事件函数，参2位延迟时间
function debounce(fn, interval) {
  var timer;
  var gapTime = interval || 1000;//间隔时间，如果interval不传，则默认1000ms
  return function() {
    clearTimeout(timer);
    var context = this;
    var args = arguments;//保存此处的arguments，因为setTimeout是全局的，arguments不是防抖函数需要的。
    timer = setTimeout(function() {
      fn.call(context,args);
    }, gapTime);
  };
}

节流函数

防抖是延迟执行，而节流是间隔执行，函数节流即每隔一段时间只执行一次（一定时间内无论点击多少次都只会触发一次），实现原理为设置一个定时器，约定xx毫秒后执行事件，如果时间到了，那么执行函数并重置定时器，和防抖的区别在于，防抖每次触发事件都重置定时器，而节流在定时器到时间后再清空定时器

function throttle(fn, interval) {
  var enterTime = 0;//触发的时间
  var gapTime = interval || 300 ;//间隔时间，如果interval不传，则默认300ms
  return function() {
    var context = this;
    var backTime = new Date();//第一次函数return即触发的时间
    if (backTime - enterTime > gapTime) {
      fn.call(context,arguments);
      enterTime = backTime;//赋值给第一次触发的时间，这样就保存了第二次触发的时间
    }
  };
}

调用

    downLoad:throttle(function(){
      console.log(this.tipsList,'sa2')
    },5000)