防抖与节流实战：前端性能优化必备技巧-开发者社区

1. 引言

在前端开发中，我们经常会遇到一些高频触发的事件，例如窗口的resize、滚动条的scroll、输入框的input以及按钮的click。如果不加控制，这些事件对应的回调函数会被频繁执行，可能导致页面卡顿、性能下降，甚至引发不必要的网络请求或计算。

防抖（Debounce）和节流（Throttle）正是为了解决这类问题而生的两种经典函数优化技术。它们通过不同的策略限制函数的执行频率，在保证功能的前提下，极大地提升了应用的流畅度和性能。本文将深入探讨两者的原理、区别，并提供可直接复用的代码实现与实战场景分析。

2. 核心概念解析

2.1 防抖 (Debounce)

防抖的核心思想是：在事件被触发后，等待一个固定的延迟时间。如果在这个延迟时间内，事件再次被触发，则取消之前的等待，重新开始计时。只有当事件停止触发，并且等待时间结束后，回调函数才会被执行一次。

比喻：就像电梯关门，如果有人连续进出（不断触发），电梯门会一直保持打开。只有当最后一个人进入后，一段时间内不再有人进出（停止触发），门才会关上（执行函数）。

适用场景：

搜索框输入联想（等待用户输入停顿后再发起请求）
窗口大小调整（resize）完成后计算布局
表单验证（用户输入完毕后再进行验证）

2.2 节流 (Throttle)

节流的核心思想是：在一段时间内，无论事件触发多少次，函数只执行一次。它像一个“水龙头”，固定频率地“滴”出执行结果。

比喻：就像地铁进站，无论站台外有多少人（频繁触发），地铁都按照固定的时间表（如每5分钟）发车一次（执行函数）。

适用场景：

页面滚动加载更多（scroll）
鼠标移动（mousemove）跟随效果
高频点击按钮（如“疯狂点赞”，防止重复提交）

3. 代码实现

3.1 防抖函数实现

/** * 防抖函数 * @param {Function} fn - 需要防抖处理的函数 * @param {number} delay - 延迟时间（毫秒） * @param {boolean} immediate - 是否立即执行（true: 先执行再等待，false: 先等待再执行） * @returns {Function} - 包装后的函数 */ function debounce(fn, delay, immediate = false) { let timer = null; let isInvoked = false; // 用于 immediate 模式标记是否已执行过 return function (...args) { const context = this; // 如果已有定时器，清除它，重新开始计时 if (timer) { clearTimeout(timer); } // 立即执行模式 if (immediate && !isInvoked) { fn.apply(context, args); isInvoked = true; } // 设置新的定时器 timer = setTimeout(() => { // 非立即执行模式，在延迟后执行 if (!immediate) { fn.apply(context, args); } // 重置状态，允许下一次立即执行（针对 immediate 模式） isInvoked = false; timer = null; }, delay); }; } // 使用示例：搜索框输入 const searchInput = document.getElementById('search'); const fetchSuggestions = debounce(function (keyword) { console.log(发起搜索请求，关键词: ${keyword}); // 实际这里会发起 AJAX 请求 }, 500); searchInput.addEventListener('input', function (e) { fetchSuggestions(e.target.value); });

3.2 节流函数实现

/** * 节流函数 * @param {Function} fn - 需要节流处理的函数 * @param {number} interval - 执行间隔（毫秒） * @param {Object} options - 配置项 * @param {boolean} options.leading - 是否在开始时执行（第一次立即执行） * @param {boolean} options.trailing - 是否在结束时执行（最后一次延迟执行） * @returns {Function} - 包装后的函数 */ function throttle(fn, interval, options = { leading: true, trailing: true }) { let lastTime = 0; let timer = null; const { leading, trailing } = options; return function (...args) { const context = this; const now = Date.now(); // 第一次执行控制 if (!lastTime && !leading) { lastTime = now; } const remaining = interval - (now - lastTime); if (remaining <= 0) { // 到达执行时间点 if (timer) { clearTimeout(timer); timer = null; } fn.apply(context, args); lastTime = now; } else if (trailing && !timer) { // 设置一个定时器，在剩余时间后执行（保证最后一次触发能执行） timer = setTimeout(() => { fn.apply(context, args); lastTime = leading ? Date.now() : 0; timer = null; }, remaining); } }; } // 使用示例：页面滚动 const handleScroll = throttle(function () { console.log('执行滚动处理逻辑，计算是否加载更多...'); // 实际这里会判断滚动位置，加载更多数据 }, 200); window.addEventListener('scroll', handleScroll);

4. 对比与选择

特性	防抖 (Debounce)	节流 (Throttle)
核心目标	确保在连续触发结束后，只执行一次。	确保在固定时间间隔内，只执行一次。
执行时机	延迟后执行（或立即执行后等待）。	固定间隔执行。
类比	电梯关门（等人走完）。	地铁发车（固定班次）。
适用场景	搜索联想、resize、输入验证。	scroll、mousemove、高频点击。
代码关键	`setTimeout`+`clearTimeout`	时间戳比较 +`setTimeout`

选择指南：

如果你关心的是最终状态（例如用户输入完毕后的最终关键词），使用防抖。
如果你关心的是过程状态，需要以固定频率反馈（例如滚动时持续判断位置），使用节流。

5. 实战场景与注意事项

5.1 结合使用

某些复杂场景可能需要结合两者。例如，一个实时图表，既需要在窗口调整大小时防抖（避免频繁重绘），又需要在数据流更新时节流（固定频率刷新图表）。

// 模拟场景：结合防抖与节流 const expensiveRender = throttle( debounce(function (data) { console.log('执行昂贵的渲染操作:', data); }, 100), 1000 ); // 高频数据流 simulateDataStream((data) => { expensiveRender(data); });

5.2 注意事项

this 指向与参数：确保包装后的函数能正确传递this和参数，上述实现已使用.apply(context, args)解决。
取消功能：可以为防抖/节流函数增加cancel方法，用于在组件卸载等场景下清除定时器，避免内存泄漏。
立即执行选项：防抖的immediate选项适用于需要立即反馈的场景（如按钮提交防止连点）。
框架集成：在 React/Vue 中，通常结合useRef/ref或自定义 Hook / Composition API 来使用，避免每次渲染创建新函数。