函数防抖与节流

函数防抖与节流其实是比较相似的概念，都是为了限制高频动作场景下的事件触发，但是两者的应用场景又有些差别。

防抖

防抖的重点是在用户持续动作时不会执行事件，直到用户停止动作才会去触发事件。常见的场景有：输入框搜索、输入校验、点击提交等等

实现方法

/**
 * @method debounce 防抖
 * @param {function} method 所需执行的函数
 * @param {number} delay 延迟时间: 时间戳 毫秒
 * @return {function} 包装器处理后的函数
 */
export function debounce(method, delay) {
  return function(...args) {
    let that = this
    clearTimeout(method.timer)
    method.timer = setTimeout(() => {
      method.apply(that, args)
    }, delay)
  }
}

节流

节流的重点是让用户的方法每隔一段时间只执行一次，而不是像防抖一样直接终止用户的方法执行。常见的场景有：mousemove、resize、scroll等等

实现方法

/**
 * @method throttle 节流
 * @param {function} method 所需执行的函数
 * @param {number} delay 延迟时间: 时间戳 毫秒
 * @return {function} 包装器处理后的函数
 */
export function throttle(method, delay) {
  let lastTime
  let timer
  return function(...args) {
    let that = this
    let nowTime = Date.now()
    clearTimeout(timer) // 总是清除事件回调
    if (lastTime && nowTime - lastTime < delay) {
      // 让方法在脱离事件后也能执行一次
      timer = setTimeout(() => {
        method.apply(that, args)
      }, delay)
    } else {
      lastTime = nowTime
      method.apply(that, args)
    }
  }
}