debounce与throttle

debounce 去抖

适用于resize事件等
在window的'resize'事件中，会被执行很多次，而每一次的执行，都会导致浏览器的重排重绘动作，这时候就有可能出现了页面卡顿现象了。
那么，debounce就出现了，它的作用在于让这个事件处理函数在连续触发时，只在最后一次执行动作，其他时候不予理会

function debounce(fn, wait) {
  let timer = null;
  return function(...args) {
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }
    timer = setTimeout(function() {
      fn.apply(this, args)
    }, wait)
  }
}

throttle 节流

适用于mousemove、scroll事件等
跟debounce一样，都是减少事件的执行次数。不同点在于，这个是会在每间隔多少时间就去执行一次事件处理函数，例如200ms，400ms，600ms... 当然，这个时间并不是精准的，只是大概的一个时间间隔

function throttle(fn, wait) {
  let timer = null;
  return function(...args) {
    if (timer) {
      return;
    }
    timer = setTimeout(function() {
      fn.call(this, ...args);
      timer = null;
    })
  }
}