节流与防抖

节流函数和防抖函数都是用来防止函数被频繁触发的。
函数节流与防抖需要做的是忽略一些事件请求以降低触发回调的频率。

节流 （throttle）

函数节流： 指定时间间隔内只会执行一次任务
使用场景： 滚动事件

function throttle(func, wait) {
  let prev, timerId; // prev 记录上一次函数执行的时间，timerId 记录计时器的id 
  wait || (wait = 500); // 默认间隔为 250ms
    // 返回的函数，每过 wait 毫秒就执行一次 func 函数

  return function() {
    let curr = +new Date();
    let diff = curr - prev;
    if (!prev || diff >= wait) { // 如果是第一次执行函数，
     //  或者时间间隔大于我们所设置的间隔，直接执行函数，并记下当前的时间
      func();
      prev = Date.now()
    } else {
      clearTimeout(timerId);
      timerId = setTimeout(func, wait - diff)
    }
  }
}

demo

防抖

函数防抖: 任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。如果在这个时间间隔内，任务再次触发，则重新计时。

使用场景： 表单 input （比如 百度搜索 在搜索框输入文字的时候会有提示，这个通常就是用防抖来做的。假如 你不用防抖 那么在你输入的时候会不断请求数据） 、resize 事件

function debounce(func,wait) {
  wait || (wait = 500);
  let timerId;
  return function () { 
    clearTimeout(timerId); // 如果在wait 内再次触发，重新计时
   timerId = setTimeout(func, wait)
  }
}

demo

总结

网上看到一个很形象的比喻，以坐电梯为例：

函数节流 ：保证在第一个人进来后开始计时，电梯10秒后准时运行一次，不等待，如果没有人，则不运行

函数防抖：如果有人进电梯（触发事件），那电梯将在10秒钟后出发（执行事件监听器），这时如果又有人进电梯了（在10秒内再次触发该事件），我们又得等10秒再出发（重新计时）。

参考资料：
Debouncing and Throttling Explained Through Examples