引言
在高性能前端开发中,防抖(Debounce)和节流(Throttle)是处理高频事件的核心手段。虽然手写实现看似简单,但在实际工程中,边界情况、内存管理、异步处理及框架集成往往带来复杂挑战。本文不赘述基础理论,直接对比主流工具库的优劣,深入分析常见陷阱,并通过搜索框、无限滚动等实战场景,提供可落地的工程化方案。
核心概念解析
防抖确保事件停止触发后执行,适用于输入框搜索;节流强制按固定频率执行,适用于滚动监听。需注意防抖包含'立即执行'模式,即在首次触发时立即执行,后续等待间隔结束后再执行一次,这在搜索场景中尤为实用。
// 基础防抖实现示例
function myDebounce(fn, delay) {
let timer = null;
return function (...args) {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}
上述代码虽简洁,但缺乏取消功能、返回值处理及 leading/trailing 控制。生产环境建议直接使用成熟库,避免重复造轮子引入潜在 Bug。
主流工具库对比
Lodash:稳定可靠
Lodash 作为老牌工具库,API 完善且 TypeScript 支持良好。其 debounce 和 throttle 配置丰富,支持 leading、trailing、maxWait 等参数,覆盖 99% 业务场景。特别是 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:
});
searchDebounce.();
searchDebounce.();


