防抖和节流

在进行窗口的resize、scroll、输出框内容校验等操纵的时候，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常之差。那么为了前端性能的优化也为了用户更好的体验，就可以采用防抖（debounce）和节流（throttle）的方式来到达这种效果，减少调用的频率。

防抖 debounce

创建一个 debounced（防抖动）函数，该函数会从上一次被调用后，延迟 wait 毫秒后调用 func 方法。

理解:

1. debounce函数就如同是技能前摇，如果在前摇阶段一直触发这个技能，只有最后一次操作会被执行。
2. 去抖动技术允许我们将多个连续调用“分组”为一个调用。
3. 想象一下你在电梯里。门开始关闭，突然另一个人试图上电梯。电梯没有开始换层功能，门又开了。现在又发生在另一个人身上。电梯延迟了它的功能（移动楼层），但优化了它的资源。

简单实现:

function debounce(func, wait) {
  let timer = null
  return function () {
    clearTimeout(timer)
    timer = setTimeout(func, wait)
  }
}

节流 throttle

创建一个节流函数，在 wait 秒内最多执行 func 一次的函数。

理解:

1. throttle是属于技能冷却，每隔一段时间可以施法一次。

简单实现:

function throttle(func, delay) {
  let timer = null
  return function() {
    if (timer) {
      return
    }
    timer = setTimeout(function() {
      func()
      timer = null
    }, delay)
  }
}

拓展

但是这种实现方式有一个很明显的问题，我想让节流函数在最后没有达到执行间隔时不执行最后一次，或者是我想让节流函数在第一次执行的时候立刻执行。或者说我取消对一个函数的防抖和节流。

lodash提供了功能完善的防抖和节流函数。