深刻理解防抖和节流

再也不用担心老是忘记两者的区别，总结一下，加深记忆。

防抖： debounce

函数被触发n秒后执行，n秒内如果再次被触发，则重新计时，一般常见于输入框的查询回调。

// 利用定时器实现
export const debounce = (fn, delay) => {
  let timer = null
  return function () {
    const ctx = this
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(ctx, arguments)
    }, delay)
  }
}

假如提莫回城需要8s，8s内被技能打中，回城中断，只有在按下B键8s内未受到影响，才能顺利回城。

节流： throttle

在一定的时间内，无论触发多少次回调，只执行一次回调函数。一般用于resize、scroll事件中。

利用Date.now()时间戳实现

// 执行头部，不执行尾部
export const throttle = (fn, delay) => {
  let time = Date.now()
  let curTime
  return function () {
    curTime = Date.now()
    if (curTime - time >= delay) {
      fn.apply(this, arguments)
      time = curTime
    }
  }
}

利用setTimeout()定时器实现

// 不执行头部，执行尾部
export const throttle = (fn, delay) => {
  let timer = null
  return function() {
    if(timer) return
    timer = setTimeout(() => {
      fn.apply(this, arguments)
      timer = null
    }, delay)
  }
}

提莫的Q技能CD为8s，那8s内无论按多少次键盘，也只能释放一次。