防抖/节流

2022-11-10 15:52:22

防抖

防抖，可以理解为避免多次误操作 使用场景：

• 文本编辑器当没有更改操作一秒后自动保存请求
• 在搜索框中输入内容没有输入内容一秒后发送请求展示下拉列表

防抖重点在于清零 clearTimeout(timer)

function debounce(fn, wait) {
  let timer
  return (...args) => {
    clearTimeout(timer)
    timer = setTimeout(() => {
      fn(...args)
    }, wait)
  }
}

节流

节流，控制一个事件发生的频率，比如五秒内只允许请求一次 使用场景：

• 发送短信验证码，60s 内只允许发送一次
• 枪战游戏，点击鼠标速度再快也只会按照设定好的射击速度发射子弹

节流重点在于加锁 timer=timeout

function throttle(fn, wait) {
  let timer
  return (...args) => {
    if (timer) {
      return
    }
    timer = setTimeout(() => {
      fn(...args)
      timer = null
    }, wait)
  }
}

function throttle(fn, wait) {
  // 上次操作的时间
  let lastTime = 0
  return (...args) => {
    const triggerTime = Date.now()
    if (triggerTime - lastTime > wait) {
      fn()
      lastTime = triggerTime
    }
  }
}