防抖和节流是JavaScript中优化高频事件执行的两种手段。防抖通过延迟执行，仅在事件停止触发一段时间后执行一次，适用于输入框搜索等场景；节流则保证函数以固定频率执行，适合滚动加载、按钮提交等需匀速响应的场景。两者核心区别在于：防抖强调“等用户停了再做”，节流注重“保持节奏执行”。合理选型可显著提升性能与体验。
在 JavaScript 中，防抖（Debounce）和节流（Throttle）是两种常见的性能优化手段，主要用于控制频繁触发的事件执行频率，比如窗口滚动、输入框输入、鼠标移动等场景。合理使用可以显著减少函数调用次数，提升页面性能。
防抖函数实现原理与应用
防抖的核心思想是：当事件被频繁触发时，只执行最后一次操作。如果在设定的时间内再次触发，则重新计时。
例如用户在搜索框输入内容，我们希望用户停止输入 300ms 后再发起请求，避免每次输入都发送请求。
基本实现：
立即学习“Java免费学习笔记（深入）”；
function debounce(func, wait) {
let timeout;
return function(...args) {
const context = this;
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(context, args), wait);
};
}使用方式：
```javascript const searchInput = document.getElementById('search'); searchInput.addEventListener('input', debounce(function(e) { console.log('搜索:', e.target.value); }, 300)); ```注意：该版本为非立即执行型。若需要首次触发立即执行，可扩展为支持“leading”边缘触发的版本。
节流函数实现原理与应用
节流的目的是让函数按照固定频率执行，比如规定一个函数 1 秒内最多执行一次，防止过度调用。
适用于窗口滚动、按钮点击防重复提交、Canvas 绘制等高频但无需每次都响应的场景。
基于时间戳的实现：
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;
}
};
}基于定时器的实现：
function throttle(func, wait) {
let timeout;
return function(...args) {
const context = this;
if (!timeout) {
timeout = setTimeout(() => {
func.apply(context, args);
timeout = null;
}, wait);
}
};
}时间戳版本保证结束时一定执行一次，定时器版本更平滑但可能延迟到最后才执行。实际中可根据需求选择或结合两者优点实现增强版节流。
防抖与节流的区别与选型建议
两者都用于限制函数执行频率，但适用场景不同：
- 防抖：适合连续事件结束后再处理，如输入联想、窗口 resize 后重新布局。
- 节流：适合持续性高频触发但需匀速响应，如滚动加载、拖拽、动画反馈。
简单判断标准：
- “等用户停下来再做” → 用防抖。
- “不能太频繁，但要保持节奏” → 用节流。
基本上就这些。掌握这两种模式，能有效提升前端性能和用户体验，尤其在交互复杂或资源消耗大的场景下尤为重要。
