前端性能优化：JS函数防抖与节流

函数防抖(debounce)

概念：事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

使用场景：

input 搜索联想且在不断输入时，可用防抖来节约请求资源
Window触发resize、浏览器滑动scroll时，不断的触发事件，用防抖来让其只触发一次

代码实现：

function debounce(func, ms = 1000) {
  let timer
  return function (...args) {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      func.apply(this, args)
    }, ms)
  }
}

通俗的讲：函数防抖就像游戏中的蓄能技能，能量没蓄满再按键就会重新蓄能

函数节流(throttle)

概念：规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

使用场景：

鼠标不断点击触发，mousedown在单位时间内只触发一次

代码实现：

function throttle(func, ms = 1000) {
  let canRun = true
  return function (...args) {
    if (!canRun) return
    canRun = false
    setTimeout(() => {
      func.apply(this, args)
      canRun = true
    }, ms)
  }
}

通俗的讲：函数节流就像游戏里的攻速，就算一直按着鼠标，也只会在规定A出动作

总结

函数防抖和函数节流都是防止某一时间频繁触发，但各自的原理不一样
函数防抖是某一段时间内触发事件执行一次，再次触发则重新计时；而函数节流是触发后一段时间必定执行一次，无法被打断