防抖、节流 - 技术栈

防抖、节流

kevin不会飞2025-04-11 10:30

防抖（Debounce）"和"节流（Throttle）"是前端开发中常用于优化高频率事件触发（如 scroll、resize、input、mousemove 等）的两种技术。它们的核心目的是控制函数执行的频率，提高性能和用户体验。

一、防抖（Debounce）

定义： 一段时间内只执行最后一次操作，适合"只关心最后一次触发"的场景。

应用场景：

搜索框输入联想
resize、scroll事件优化
表单输入校验等

例子：

js 复制代码

复制编辑
function debounce(fn, delay) {
  let timer = null
  return function (...args) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(this, args)
    }, delay)
  }
}

// 使用
const handleInput = debounce(e => {
  console.log('用户停止输入:', e.target.value)
}, 500)

二、节流（Throttle）

定义： 一定时间内只执行一次操作，适合"每隔一段时间执行一次"的场景。

应用场景：

页面滚动事件
拖拽
点击事件防止频繁提交

例子：

js 复制代码

复制编辑
function throttle(fn, interval) {
  let lastTime = 0
  return function (...args) {
    const now = Date.now()
    if (now - lastTime >= interval) {
      lastTime = now
      fn.apply(this, args)
    }
  }
}

// 使用
const handleScroll = throttle(() => {
  console.log('节流执行一次 scroll')
}, 200)

总结对比：

特性	防抖（Debounce）	节流（Throttle）
执行频率	只在最后一次事件后执行一次	固定间隔执行一次
适合场景	搜索联想、自动保存、输入监听	滚动监听、拖拽、频繁点击限制
控制方式	定时器重置	时间戳或定时器