重温防抖节流（详细篇）一看就会！！【前端】

成功就是赚到，失败就是学到！

介绍

防抖（debounce） 和 节流（throttle） 都是用来控制高频率触发事件（比如 scroll、resize、input、mousemove 等）的执行次数的，但它们的适用场景和核心思想不同。

防抖

定义

把一连串高频触发的事件 合并成一次，只有在最后一次触发结束后，等待一段时间才真正执行。如果在等待时间内又触发了事件，就重新计时。

适用场景

适合 只关心最后一次触发结果 的场景。

• 🔍 输入框搜索：用户输入完最后一个字，才去请求接口。
• 📏 窗口大小调整：用户停止拖拽调整窗口大小后，才重新计算布局。
• 📋 表单验证：只在用户停止输入后验证，而不是每输入一个字符就验证。

👉 核心思路：只执行最后一次。

代码

封装防抖函数

/**
 * 防抖函数
 * @param {Function} fn - 需要防抖的函数
 * @param {number} delay - 延迟时间（毫秒）
 * @returns {Function}
 */
function debounce(fn, delay = 300) {
  let timer = null
  return function (...args) {
    clearTimeout(timer) // 清除上一次的定时器
    timer = setTimeout(() => {
      fn.apply(this, args) // 保证 this 和参数不丢失
    }, delay)
  }
}

具体用法

const onInput = debounce((e) => {
  console.log("搜索关键词：", e.target.value)
}, 500)

document.querySelector("input").addEventListener("input", onInput)

节流

定义

规定一个时间间隔（如 200ms），不管事件触发多频繁，只在这个间隔内执行一次。即：第一次执行后，后面在规定时间内的触发都忽略，直到下一个时间窗口才执行。

适用场景

适合 持续触发但希望函数周期性执行 的场景。

• 🖱 页面滚动：监听 scroll 事件，做吸顶导航、无限加载等。
• 🎮 按钮点击：防止按钮被疯狂点击，多次触发请求。
• 🎥 鼠标移动：游戏或绘图场景，只在固定频率下采样位置。

👉 核心思路：匀速执行。

代码

封装节流函数

/**
 * 节流函数
 * @param {Function} fn - 需要节流的函数
 * @param {number} interval - 时间间隔（毫秒）
 * @returns {Function}
 */
function throttle(fn, interval = 300) {
  let lastTime = 0
  return function (...args) {
    const now = Date.now()
    if (now - lastTime >= interval) {
      fn.apply(this, args)
      lastTime = now
    }
  }
}

具体用法

const onScroll = throttle(() => {
  console.log("页面滚动位置：", window.scrollY)
}, 200)

window.addEventListener("scroll", onScroll)

对比

表格对比

特性	防抖（Debounce）	节流（Throttle）
执行时机	最后一次触发后才执行	每隔固定时间执行一次
适合场景	只关心最终结果	持续触发时需要定期反馈
举例	搜索框输入、窗口 resize	scroll 滚动监听、按钮点击

一个常见比喻

• 防抖：电梯关门。有人进来就重新计时，直到没人进来了才关门。
• 节流：公交车发车。每隔 10 分钟发一次车，不管人来多少。