防抖和节流是前端优化高频事件的两种手段：防抖通过延迟执行，仅在事件停止触发后运行一次，适用于搜索输入等场景；节流则保证固定时间间隔内最多执行一次，适合滚动监听、拖拽等持续操作，提升性能与用户体验。
在前端开发中，用户交互频繁触发事件（如窗口滚动、输入框输入、鼠标移动）容易导致性能问题。JavaScript中的防抖（debounce）和节流（throttle）是两种常用的优化手段，用来控制函数执行频率，减少不必要的计算或请求，从而提升页面响应速度和用户体验。
防抖（Debounce）：只执行最后一次操作
防抖的核心思想是：当事件被触发后，设置一个延迟时间，如果在这个时间内事件再次被触发，则重新计时。只有当事件停止触发超过指定时间后，才会执行一次回调函数。
适用于：搜索框输入建议、窗口大小调整、按钮重复点击等场景，避免在用户连续操作期间频繁执行处理逻辑。
示例：输入框实时搜索- 用户每输入一个字符都会触发 input 事件
- 使用防抖可等待用户停顿后再发起请求
- 避免为每个字符都发送网络请求
实现方式：
立即学习“Java免费学习笔记（深入）”；
function debounce(func, delay) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => func.apply(this, args), delay);
};
}
<p>// 使用
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(function (e) {
console.log('搜索:', e.target.value);
}, 300));
节流（Throttle）：固定时间间隔执行一次
节流的原理是：无论事件触发多频繁，保证在一定时间间隔内最多执行一次回调函数。与防抖不同，节流更强调“稳定输出”，适合需要周期性执行的场景。
适用于：页面滚动监听、鼠标拖拽、高频点击按钮、Canvas 绘图等持续性操作。
示例：滚动加载更多内容- 滚动过程中会不断触发 scroll 事件
- 使用节流确保每 200ms 最多检查一次是否接近底部
- 防止短时间内多次判断和请求
实现方式（时间戳版）：
function throttle(func, delay) {
let previous = 0;
return function (...args) {
const now = Date.now();
if (now - previous > delay) {
func.apply(this, args);
previous = now;
}
};
}
<p>// 使用
window.addEventListener('scroll', throttle(() => {
console.log('滚动位置:', window.scrollY);
}, 200));
防抖与节流的区别与选择
两者目的相似，但适用场景略有不同：
- 防抖：适合“最终结果”型操作，比如输入完成后再查询，只关心最后一次动作
- 节流：适合“过程监控”型操作，比如滚动、拖动，需要定期响应但不必每次触发都执行
选择依据：
- 如果希望“等用户停下来再处理”，选防抖
- 如果希望“不管怎么动，每隔一段时间处理一次”，选节流
基本上就这些。掌握防抖和节流，能有效减少资源浪费，让页面更流畅。实际项目中可以结合业务需求灵活使用，也可以借助 Lodash 等工具库提供的 debounce 和 throttle 方法快速实现。
