节流函数(throttle)

上一篇文章说了防抖函数的实现，其实着两个函数是类似的，都可以实现性能优化，那么如何抉择呢？
它们的区别是：假设有个时间量为wait，为了具体好理解一点就设wait = 1s

防抖函数是在单位时间（>1）随便触发多少次事件，只要这次触发的时间与上次触发的时间只差不到1s，都不执行；
节流函数是在单位时间（>1）随便触发多少次事件，只要过了1s，就会执行一次。

节流函数的实现

应用场景：现在的需求是这样的，用户在输入框内疯狂输入字符串，每经过1s就向后台发起请求查询数据库。
节流函数有两种实现的方式：一种是定时器，另外一种是计算时间差

定时器实现

function throttle(func, wait) {
  let timeout

  return function() {
    if (!timeout) {
      timeout = setTimeout(() => {
        timeout = null
        func.call(this, arguments)
      }, wait)
    }
  }
}

这就实现了一个节流函数。当触发事件的时候，如果没有设置执行回调函数的定时器，就创建一个。当定时器中的回调函数被执行的时候， 将指向定时器引用的timeout设置为null，那么下一此再执行时，又会重新触发并设置一个定时器。
使用定时器创建的节流函数特点是，在时间触发结束后，也会执行一次事件。

计算时间差的实现

function throttle(func, wait) {
  let previous = 0

  return function() {
    let now = +new Date()
    let remain = wait - (now - previous)

    if (remain < 0) {
      previous = now
      func.call(this, arguments)
    }
  }
}

这种实现方式，是将previous(上一次的执行时间戳)设置为自由变量，然后在每一次触发事件的时候都获取当前时间戳。remain的得来可能有点难以理解，将wait理解为理论等待时间，now - previous理解为实际等待时间。那么remain就是剩余时间。如果剩余时间小于0了，那肯定就要执行函数了。在执行之前先将当前执行时间更新保存到previous中。
计算时间差的实现方式的特性为：在第一次触发事件时，回调函数会立即执行；不触发事件后，也不会再执行一次。

更强大的节流函数

最新的需求是这样的，事件第一次触发的时候我要执行该函数，事件停止后，也要再触发一次函数。

function throttle(func, wait, options = {}) {
  let timeout,
    previous = 0

  return function() {
    let now = +new Date()
    let remain = wait - (now - previous)

    if (remain < 0) {
      if (previous === 0 && !options.begin) {
        previous = now
        return
      }

      if (timeout) {
        clearTimeout(timeout)
        timeout = null
      }

      previous = now
      func.call(this, arguments)
    } else if (!timeout && options.end) {
      timeout = setTimeout(() => {
        func.call(this, arguments)
        timeout = null
      }, wait)
    }
  }
}

这样就完成了强大的节流函数了， 第一次来的时候，可以执行一次回调函数，结束的时候也会执行一次回调函数。并且可以通过options来配置。

如果设置了options.begin === true就第一触发事件就立刻会执行回调函数。因为我们设置previous的的初始值为0，所以如果previous === 0就表示是第一次触发该事件，与上options.begin就可以得出第一次是否执行该回调函数。

如果设置了options.end === true事件停止触发后也会执行一次该回调函数。其实在事件触发的整个时间内，定时器中的回调函数从来都没有被执行过，只有在事件停止出发后，定时器内的回调函数才被执行。只要设置了options.end就相当于只是用计算时间的方式来实现节流。