防抖&节流

1.概念

• 防抖：给定的时间期限内，仅触发一次事件；如果在计时周期内，再次触发，重新开始计时；

   缺点：如果不停止触发，将不会执行对应的处理器函数
  

• 节流：函数执行后，在给定的时间周期内不再可用；时间周期结束，恢复使用

2.使用场景

 1. 滚动鼠标，实现翻页：监听鼠标事件，一次滚动多次触发，

	目标：减少触发频次 => 一次触发后，执行时间间隔后再执行

 2. 页面resize，移动鼠标，多次被事件处理器捕获

	目标：根据最终的一次变化情况改变页面大小

 3. 搜索框实时搜索，放开键盘就会触发

	目标：隔一段时间必须触发

3.实现

var debounce = function (fn, delay) {
  let timer;
  if (timer) {
    // 如果存在计时器，清空
    clearTimeout(timer);
  }
  // 每次触发，初始化计数器
  timer = setTimeout(fn, delay);
};

var throttle = function (fn, delay) {
  let timer;
  if (timer) {
    // 计时器存在时，不会重新触发
    return;
  }
  timer = setTimeout(() => {
    fn();
    // 函数执行完后，清空计时器
    clearTimeout(timer);
  }, delay);
};