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 来使用，避免每次渲染创建新函数。
6. 总结
防抖和节流是前端性能优化中不可或缺的“利器”。理解其原理差异，并能在正确的场景中选择和应用，是高级前端工程师的必备技能。本文提供的代码实现兼顾了功能完整性与边界情况处理，你可以直接复制到项目中使用。记住核心口诀：“防抖等最终，节流控频率”。
在实际开发中，除了手动实现，也可以使用 Lodash 等工具库中成熟的_.debounce和_.throttle函数。但理解其底层实现，能让你在遇到更复杂的需求时游刃有余。
