概述
防抖（debounce）和节流（throttle）是前端开发中处理高频事件的核心优化手段。本文对比了 Lodash、RxJS、轻量级工具及 WASM 实现的特点，分析了定时器清理、异步处理、this 指向及动态参数调整等常见陷阱，并提供了搜索框、无限滚动、拖拽排序及窗口 Resize 等场景的最佳实践方案。
核心概念
防抖指在事件停止触发后执行一次函数，适用于输入框搜索；节流指按固定时间间隔执行函数，适用于滚动加载。防抖支持立即执行模式，节流可配置 leading/trailing 策略。
// 基础防抖示例
function myDebounce(fn, delay) {
let timer = null;
return function (...args) {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}
手写版本常存在 this 丢失、无取消功能、边界情况处理缺失等问题，建议优先使用成熟库。
主流库对比
Lodash
老牌稳定，文档完善，TypeScript 支持好。支持 leading、trailing、maxWait 等丰富配置。缺点是体积较大，需按需引入。
import { debounce, throttle } from 'lodash';
const searchDebounce = debounce((keyword) => {
console.log('搜索:', keyword);
return fetch(`/api/search?q=${keyword}`);
}, 300, { leading: false, trailing: true, maxWait: 1000 });
RxJS
基于响应式流，适合复杂链式操作。配合 可解决竞态问题，但学习曲线陡峭，包体积较大。
