在前端开发中，我们经常会遇到一些高频触发的事件，比如：页面滚动，输入框输入，鼠标移动，按钮点击。些事件若频繁触发，会导致性能下降甚至页面卡顿。为了优化这种场景，前端开发者经常使用两种技术手段：防抖（Debounce） 和 节流（Throttle）。

一、防抖（Debounce）

1.1 什么是防抖？

防抖是一种将多次高频操作合并为最后一次执行的技术。 简单来说，设定一个延迟时间，当事件连续触发时，只有在最后一次触发后的 n 毫秒内不再触发，才执行对应操作。

举个栗子，你在打字搜索框中输入关键字，系统不希望你每打一个字就发一次请求，而是等待你不再输入 500ms 后再发一次请求 —— 这就是典型的防抖场景。

1.2 防抖的实现

export function debounce<T extends (...args: any[]) => void>(func: T,delay: number = 500
): (...args: Parameters<T>) => void {// timeoutId 用于保存当前的定时器 ID，以便后续清除let timeoutId: ReturnType<typeof setTimeout> | null// 返回一个新的函数，接受和原函数相同的参数return function (...args: Parameters<T>) {if (timeoutId) {clearTimeout(timeoutId)}timeoutId = setTimeout(() => {func(...args)}, delay)}
}

使用示例

// 使用示例：给输入框添加防抖效果，延迟 500ms 执行搜索操作
const searchInput = document.getElementById('search') as HTMLInputElement;
searchInput.addEventListener('input', debounce((e: Event) => {const target = e.target as HTMLInputElement;console.log('搜索关键词：', target.value);
}, 500));

二、节流（Throttle）

2.1 什么是节流？

**节流是指将高频事件限制在一定时间间隔内只执行一次。**简单来说，无论事件触发多少次，只在每 n 毫秒内执行一次函数。
举个栗子，你在监听浏览器窗口滚动来实现懒加载，如果每滚动 1px 就执行一次加载，会造成性能极大浪费。节流可以控制事件每隔 200ms 执行一次，从而达到性能优化的目的。

2.2 节流的实现方式

时间戳实现

// 节流函数，确保在一定时间间隔内同一事件只执行一次
function throttle(fn: Function, delay: number): Function {let lastTime: number = 0;// 返回一个新的函数，处理触发的事件return function (...args: any[]) {const now: number = Date.now();// 判断是否超过指定的时间间隔if (now - lastTime >= delay) {lastTime = now;// 使用 apply 调用函数，确保 this 和参数正确fn.apply(this, args);}};
}

定时器实现

/*** 节流函数（定时器版本）* 在 delay 间隔内只允许执行一次函数，多次触发只响应第一次，后续在间隔后再次允许执行*/
function throttleWithTimer(fn: Function, delay: number): Function {let timer: ReturnType<typeof setTimeout> | null = null;return function (...args: any[]) {// 如果定时器还在运行中，直接跳过本次触发if (timer) return;// 启动定时器，delay 毫秒后清除 timer，并执行函数timer = setTimeout(() => {fn.apply(this, args);timer = null; // 重置定时器，允许下一次触发}, delay);};
}

使用示例

window.addEventListener('scroll', throttleWithTimer(() => {console.log('滚动事件触发（定时器节流）');
}, 200));

三、防抖与节流的对比

特性	防抖（Debounce）	节流（Throttle）
执行时机	停止触发后执行一次	固定时间间隔内执行一次
使用目的	减少触发次数	控制触发频率
常见场景	搜索输入、按钮防重复点击	滚动监听、页面resize等

四、总结

防抖与节流是前端性能优化中非常常见的技巧，掌握它们可以有效提升用户体验，减少不必要的资源浪费。记住一句话总结：防抖关注的是最后一次；节流关注的是间隔时间内的第一次。