函数节流（throttle）和函数去抖（debounce）

在前端开发中，经常会遇到一些频繁执行的事件，像resize事件，mousemove事件等，这些事件会频繁地执行Dom操作、资源价值等行为，可能会导致UI的停顿甚至浏览器的崩溃。对于这种频繁执行的事件，一般有 throttle（函数节流）和 debounce（函数去抖）两种解决方案。

throttle

函数节流会周期性地执行函数，当调用的函数的时候大于或者等于执行周期时才会执行该函数，然后进入下一个周期。就好像一个水龙头控制在滴水，每隔一段时间就会有那么一滴水滴下来。

简单实现：

/**
* 频率控制，返回函数连续调用时，fn执行周期控制为delay/次
* @param fn {function} 需要调用的函数
* @param delay {number} 延迟时间，单位毫秒
* @return {function} 实际调用函数
*/
throttle(fn, delay) {
    let last = 0

    return function(...args) {
      let cur = +new Date()
      if((cur - last) > delay) {
          fn.apply(this,arguments)
          last = cur
      }
    }
}

debounce

函数去抖是当调用了这个函数之后n毫秒后，才会执行该函数，但是如果n毫秒内再次被调用，时间会重新计算。函数去抖可以把多个顺序地调用合并成一次，就好像坐电梯要关门了，突然要上来，电梯并不会改变楼层，而是会再次打开门，直到没有人再上来。

简单实现：

/**
* 空闲控制，返回函数连续调用时，空闲时间必须大于等于delay才会执行fn
* @param fn {function} 需要调用的函数
* @param delay {number} 空闲时间，单位毫秒
* @return {function} 实际调用函数
*/
debounce(fn, delay) {
    let timer = null

    return function(...args) {
      if (timer) {
        clearTimeout(timer)
      }

      timer = setTimeout(() => {
        fn.apply(this, args)
      }, delay)
    }
}

总结

这里只是throttle和debounce的简单实现，如果想看更完整的实现，可以查看underscore源码里的 _.throttle 和_.debounce的实现。