前端性能优化中，防抖与节流是处理高频触发事件的经典方案，两者的核心目标都是减少函数在单位时间内的执行次数，只是实现逻辑和适用场景有所区别。理解它们的实现原理，能帮助开发者更灵活地应对不同的业务需求。
防抖的实现原理
防抖的核心逻辑是：当事件触发后，不立即执行目标函数，而是设置一个定时器，如果在定时器倒计时结束前再次触发了同一个事件，就清空之前的定时器，重新设置新的定时器。只有当事件触发后的一段时间内没有再次触发，才会执行目标函数。
这种逻辑适合需要等待用户操作停止后再执行的场景，比如搜索框输入联想、窗口大小调整结束后计算布局等。
下面是原生JavaScript实现的防抖函数：
/**
* 防抖函数
* @param {Function} fn 需要执行的目标函数
* @param {number} delay 延迟执行的时间，单位毫秒
* @returns {Function} 经过防抖处理的函数
*/
function debounce(fn, delay) {
// 存储定时器的变量
let timer = null;
// 返回防抖处理后的函数
return function(...args) {
// 如果已有定时器，先清空
if (timer) {
clearTimeout(timer);
}
// 重新设置定时器
timer = setTimeout(() => {
// 执行目标函数，绑定this指向，传入参数
fn.apply(this, args);
// 执行后清空定时器变量
timer = null;
}, delay);
};
}
节流的实现原理
节流的核心逻辑是：在指定时间内，无论事件触发多少次，都只执行一次目标函数。如果事件触发时距离上一次执行的时间还没到指定间隔，就不会执行，直到间隔时间满足才会再次执行。
这种逻辑适合需要持续触发但不需要高频响应的场景，比如页面滚动加载、鼠标移动拖拽等。
节流有两种常见的实现方式，分别是时间戳版本和定时器版本，下面是时间戳版本的实现：
/**
* 节流函数（时间戳版本）
* @param {Function} fn 需要执行的目标函数
* @param {number} interval 执行间隔，单位毫秒
* @returns {Function} 经过节流处理的函数
*/
function throttle(fn, interval) {
// 记录上一次执行的时间，初始为0
let lastTime = 0;
// 返回节流处理后的函数
return function(...args) {
// 获取当前时间戳
const nowTime = Date.now();
// 判断当前时间与上一次执行时间的差值是否大于等于间隔
if (nowTime - lastTime >= interval) {
// 执行目标函数，绑定this指向，传入参数
fn.apply(this, args);
// 更新上一次执行的时间
lastTime = nowTime;
}
};
}
定时器版本的节流实现如下：
/**
* 节流函数（定时器版本）
* @param {Function} fn 需要执行的目标函数
* @param {number} interval 执行间隔，单位毫秒
* @returns {Function} 经过节流处理的函数
*/
function throttleByTimer(fn, interval) {
// 存储定时器的变量
let timer = null;
// 返回节流处理后的函数
return function(...args) {
// 如果定时器不存在，说明可以执行
if (!timer) {
timer = setTimeout(() => {
// 执行目标函数，绑定this指向，传入参数
fn.apply(this, args);
// 执行后清空定时器变量，允许下次执行
timer = null;
}, interval);
}
};
}
防抖与节流的差异对比
为了更清晰地理解两者的区别，我们可以从执行时机、适用场景等方面进行对比：
| 对比维度 | 防抖 | 节流 |
|---|---|---|
| 执行时机 | 事件停止触发后一段时间执行 | 每隔固定时间执行一次 |
| 执行次数 | 连续触发只执行最后一次 | 连续触发按间隔执行多次 |
| 典型场景 | 搜索输入、窗口resize | 滚动加载、鼠标移动 |
实际使用注意事项
在实际项目中使用防抖和节流时，需要注意以下几点：
- 防抖的延迟时间和节流的间隔需要根据实际业务场景调整，过短达不到优化效果，过长会影响用户体验
- 如果防抖和节流函数需要支持取消执行，可以在返回的函数上添加取消方法，清空对应的定时器
- 使用
apply绑定this是为了保证目标函数内部的this指向和事件触发时的上下文一致，避免this丢失的问题
掌握防抖与节流的实现原理后，开发者可以根据具体的业务需求灵活调整实现逻辑，也可以基于这两个基础版本扩展出支持立即执行、支持取消等更高级的功能，更好地服务于前端性能优化工作。
防抖节流前端性能优化JavaScript修改时间：2026-06-27 09:54:31