防抖只执行最后一次，节流固定时间执行一次。防抖适用于搜索输入等需等待用户停顿的场景，节流适合滚动监听、拖拽等需周期性响应的场景，二者均通过限制函数执行频率提升性能。
在前端开发中，某些事件如窗口滚动（scroll）、窗口缩放（resize）、输入框输入（input）等会频繁触发，如果每次触发都执行回调函数，很容易造成性能问题。为了解决这类高频事件带来的性能负担，JavaScript 提供了两种常见优化手段：防抖（debounce）和节流（throttle）。它们的核心目标是控制函数的执行频率，但实现方式和适用场景有所不同。
防抖（Debounce）：只执行最后一次操作
防抖的原理是：当事件被触发时，设置一个定时器，如果在定时器到期前该事件再次被触发，则清除旧的定时器并重新开始计时。只有当事件停止触发一段时间后，回调函数才会真正执行。
这就像电梯的关门机制：有人进入电梯后，门不会立刻关闭，而是等待一段时间。如果在这期间又有人进来，等待时间将重新计算，直到没人进入才关门。
适用场景：
立即学习“Java免费学习笔记（深入）”；
- 搜索框输入联想，避免每次输入都发起请求
- 表单验证，用户输入完成后才校验
- 按钮多次点击防止重复提交
简单实现：
function debounce(func, wait) {
let timeout;
return function(...args) {
const context = this;
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(context, args), wait);
};
}
使用时：
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(function(e) {
console.log('执行搜索:', e.target.value);
}, 300));
节流（Throttle）：固定时间段内只执行一次
节流的原理是：无论事件触发多么频繁，保证在指定的时间间隔内最多执行一次回调函数。可以类比为水龙头滴水——即使一直开着，也每隔一定时间才滴一滴。
与防抖不同，节流更注重“持续均匀地执行”，适用于需要持续响应但不需要每次都处理的场景。
适用场景：
立即学习“Java免费学习笔记（深入）”；
- 页面滚动时触发懒加载或吸顶效果
- 鼠标移动事件（如拖拽、画布绘制）
- 游戏中的按键反馈，避免角色移动过快
基于时间戳的实现：
function throttle(func, wait) {
let previous = 0;
return function(...args) {
const now = Date.now();
const context = this;
if (now - previous > wait) {
func.apply(context, args);
previous = now;
}
};
}
使用示例：
window.addEventListener('scroll', throttle(() => {
console.log('监听页面滚动');
}, 100));
防抖与节流的关键区别
虽然两者都用于限制函数执行频率，但行为逻辑不同：
- 防抖倾向于“等到安静”再执行，适合最终结果处理
- 节流保证“周期性执行”，适合过程性反馈
- 连续触发下，防抖可能一次都不执行（未等到静止），而节流至少会按间隔执行
实际应用建议
选择使用哪种方式，取决于业务需求：
- 用户输入后查询接口 → 用防抖，减少无效请求
- 滚动时更新元素位置 → 用节流，保持流畅感知
- 可结合使用：先节流控制频率，内部再防抖处理细节
基本上就这些。理解清楚两者的机制和差异，就能在实际项目中合理选择，有效提升页面性能和用户体验。
