throttle和debounce

第一次接触到这个知识的时候感觉这两个特别像，特别容易弄混，后来自己想了个例子，尝试区别这两个概念，不过没有太大的效果。最近项目中需要用到这debounce，下定决心要弄清楚这两个概念，就仔细去看了loadash中的源码。lodash源码中推荐了David Corbacho's article，仔细看看真的获益匪浅，看完了之后就能容易的理解loadash中源码的写法了。

debounce（防抖）：指高频率发生的事件在指定的时间内只相应最后一次或第一次，如果在时间内在此触发，则重新计算时间。（之前看到的都是最后一次，第一次的概念还是在David Corbacho's article看到的）。主要应用在一组突发的事件，如搜索时，等待用户把搜索内容输入完成后（一段时间内不在输入）自动搜索。

防抖响应最后一次可以类比为乘坐电梯，进入电梯后如果不按关门按钮，电梯会等待一段时间自动关门（指定时间），如果在电梯等待或者关门的时候，有人按动了开门按钮，那么电梯会停下把门打开，然后重新等待（重新记时）。

throttle（节流）：高频率发生的事件，在指定时间内只响应（第）一次。主要应用在scroll和触发css类。

requestAnimationFrame：一种节流，当需要重复计算去渲染元素时（动画效果）使用。

贴一张图，对debounce和thottle的理解，参考了David Corbacho's article中的效果：

以下为loadash中debounce和throttl的源码(改动了参数部分)：

debounce：

export default function debounce(func, wait, { maxWait, leading = false, trailing = true } = {}) {
  let lastCallTime,
    lastInvokeTime = 0
  let lastArgs, lastThis
  let timerId
  let maxing = !!maxWait
  let result

  function invokeFunc(time) {
    let args = lastArgs,
      thisArg = lastThis
    lastArgs = lastThis = undefined
    lastInvokeTime = time
    return func.apply(thisArg, args)
  }
  function shouldInvoke(time) {
    let timeSinceLastCall = time - lastCallTime,
      timeSinceLastInvoke = time - lastInvokeTime
    return (
      lastCallTime === undefined ||
      timeSinceLastCall >= wait ||
      timeSinceLastCall < 0 ||
      (maxing && timeSinceLastInvoke >= maxWait)
    )
  }
  function remainingWait(time) {
    let timeSinceLastCall = time - lastCallTime,
      timeSinceLastInvoke = time - lastInvokeTime,
      timeWaiting = wait - timeSinceLastCall
    return maxing ? Math.min(timeWaiting, maxWait - timeSinceLastInvoke) : timeWaiting
  }
  function timerExpired() {
    let time = Date.now()
    if (shouldInvoke(time)) {
      return trailingEdge(time)
    }
    timerId = setTimeout(timerExpired, remainingWait(time))
  }
  function leadingEdge(time) {
    // Reset any `maxWait` timer.
    lastInvokeTime = time
    timerId = setTimeout(timerExpired, wait)
    return leading ? invokeFunc(time) : result
  }
  function trailingEdge(time) {
    timerId = undefined
    if (trailing && lastArgs) {
      return invokeFunc(time)
    }
    lastArgs = lastThis = undefined
    return result
  }
  function debounced() {
    let time = Date.now(),
      isInvoking = shouldInvoke(time)
    lastArgs = arguments
    lastThis = this
    lastCallTime = time

    if (isInvoking) {
      if (timerId === undefined) {
        return leadingEdge(lastCallTime)
      }
      if (maxing) {
        clearTimeout(timerId)
        timerId = setTimeout(timerExpired, wait)
        return invokeFunc(lastCallTime)
      }
    }

    if (timerId === undefined) {
      timerId = setTimeout(timerExpired, wait)
    }
    return result
  }
  function cancel() {
    if (timerId !== undefined) {
      clearTimeout(timerId)
    }
    lastInvokeTime = 0
    lastArgs = lastCallTime = lastThis = timerId = undefined
  }
  function flush() {
    return timerId === undefined ? result : trailingEdge(Date.now())
  }

  debounced.cancel = cancel
  debounced.flush = flush
  return debounced
}

throttle：

import debounce from './debounce'
export default function throttle(func, wait, { leading = true, trailing = true } = {}) {
  if (typeof func != 'function') {
    throw new TypeError('Expected a function')
  }
  return debounce(func, wait, {
    leading: leading,
    maxWait: wait,
    trailing: trailing
  })
}

可以看到，throttle的实现是确定了参数的debounce。所以，弄混也能理解，哈哈哈哈