在现代前端开发中，用户交互频繁触发事件（如输入、滚动、窗口调整等），容易导致函数被重复调用，甚至触发复杂计算、API 请求、页面渲染等，引发性能问题。防抖和节流是两种常用策略，用于控制事件触发频率，提升响应性能与用户体验。

什么是防抖（Debounce）？

防抖是一种在事件触发结束后才执行函数的技术：如果在等待时间内事件再次触发，则重新计时。即通过“延迟执行”，确保只在最后一次触发后执行一次逻辑。

应用场景示例：

搜索输入时，等待用户停止输入再发送请求（避免每次键入即触发请求）。

表单验证、按钮点击防重复提交。

窗口 resize 后统一执行布局重算。

简单实现方式：

function debounce(func, delay) {

let timer = null;

return function(...args) {

clearTimeout(timer);

timer = setTimeout(() => {

func.apply(this, args);

}, delay);

};

}

还可以支持“立即执行”功能（前沿触发）和“延后执行”（尾部触发）的参数配置。

什么是节流（Throttle）？

节流则是在持续触发事件期间，按照固定时间间隔执行一次函数。即“限流”执行，确保函数在指定时间片段内不会被重复调用。

常见应用场景：

滚动事件绑定（例如无限滚动、加载更多等）。

鼠标拖拽、mousemove 事件中更新坐标或绘制操作。

高频点击操作、游戏中的射击等需限制发射频率。

两种实现方式：

1. 定时器版（有尾无头）

function throttle(func, delay) {

let timeout = null;

return function(...args) {

if (!timeout) {

timeout = setTimeout(() => {

timeout = null;

func.apply(this, args);

}, delay);

}

};

}

2. 时间戳版（有头无尾）

function throttle(func, delay) {

let previous = 0;

return function(...args) {

const now = Date.now();

if (now - previous > delay) {

func.apply(this, args);

previous = now;

}

};

}

两种方式可以根据是否需要首次立即执行或延迟执行来选择。

防抖 vs 节流：核心区别与选择建议

执行机制

防抖：事件停止触发后才执行。

节流：持续触发期间，按固定间隔执行。

适用场景

防抖适合等待用户动作稳定后执行，如输入结束后触发搜索。

节流适合实时反馈、频繁事件下需要控制执行频率的场景，如滚动、拖拽等。

UX 考量

防抖可能带来响应延迟。

节流保持稳定执行节奏，但可能略有“卡顿”感。

最佳实践与优化建议

合理设定延迟时间：根据具体场景优化，例如搜索输入可设 300–500ms，滚动监听可设 100–200ms。

支持“前沿”与“尾部”触发选项：增强灵活度，例如按钮防误触或 resize 优化。

函数引用稳定：在 React 或其他框架中应使用 useRef、useCallback 等手段保持防抖/节流函数引用不变，避免频繁重新创建带来的闭包问题或死记时器问题。

清理机制：组件卸载时需清除未触发的定时器，避免内存泄漏或调用异常。

优先使用成熟库：如 Lodash 的 _.debounce 和 _.throttle，提供额外配置选项、边缘处理与兼容性保障。

增强封装灵活性：可封装支持 Promise 或返回值的防抖/节流，实现更通用的复用函数。

防抖与节流是前端性能优化中不可或缺的工具。通过正确理解两者机制、场景与差异，并结合实际框架与业务需求加以灵活使用，可以显著提升页面性能体验与资源利用效率。希望你能在高频事件处理中游刃有余，写出又快又稳定的交互体验代码。