防抖与节流

前因：用户操作频繁的触发事件执行，而对于DOM操作、资源加载等耗费性能的处理，很可能导致页面卡顿，甚至浏览器崩溃。

防抖 debounce

概念：函数防抖是在函数需要频繁触发情况下，只有足够空闲时间，才执行一次。

场景：

1. 实时搜索 keyup
2. 拖拽 mousemove

// 封装防抖函数
// 每wait毫秒才执行一次
// handler 需要执行的方法
function debounce(handler, wait) {
  var timer = null;
  return function(){
    var self = this; // this ==> window
    var _arg = arguments; 
    clearTimeout(timer);
    timer = setTimeout(function(e){
      console.log(arguments)
      handler.apply(self, _arg)
    }, wait);
  }
}

节流 throttle

概念：预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行

场景：

1. 窗口调整 resize
2. 页面滚动 scroll
3. 秒杀 mousedown

// 节流
// 判断点击前后的时间差，如果大于等待事件wait，就执行函数
// handler 需要执行的方法
function throttle(handler, wait) {
  var lastTime = 0;
  return function (e){
    var newTime = new Date().getTime();
    if(newTime - lastTime > wait) {
      handler.apply(this, arguments);
      lastTime = newTime;
    }
  }
}