防抖指事件频繁触发时仅执行最后一次，适用于搜索联想等场景；节流则保证在固定时间间隔内最多执行一次，适合滚动监听等连续操作，两者均通过降低函数执行频率提升性能。
在前端开发中，JavaScript的性能优化是一个不可忽视的话题。特别是在处理高频触发事件时，比如窗口滚动、输入框输入、鼠标移动等，如果不加以控制，很容易造成页面卡顿甚至崩溃。防抖（Debounce）和节流（Throttle）是两种常用的优化手段，能有效减少函数执行次数，提升应用性能。
什么是防抖（Debounce）
防抖的核心思想是：当事件被频繁触发时，只执行最后一次操作。也就是说，只要事件持续触发，函数的执行就会被不断推迟，直到事件停止触发一段时间后才真正执行一次。
适用于搜索框输入联想、窗口大小调整后重新渲染、按钮重复点击等场景。
实现方式：
立即学习“Java免费学习笔记（深入）”；
function debounce(func, delay) {
let timer = null;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
// 使用示例
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(function(e) {
console.log('搜索:', e.target.value);
}, 300));
什么是节流（Throttle）
节流的策略是：在一定时间间隔内，无论事件触发多少次，函数最多只执行一次。可以理解为“稀释”函数的执行频率。
常用于监听页面滚动、鼠标移动、窗口resize等连续触发但不需要每次都响应的场景。
实现方式（定时器版本）：
function throttle(func, delay) {
let flag = true;
return function (...args) {
if (!flag) return;
flag = false;
setTimeout(() => {
func.apply(this, args);
flag = true;
}, delay);
};
}
也可以使用时间戳方式实现，逻辑略有不同但效果类似。
防抖与节流的区别
虽然两者都用于限制函数执行频率，但适用场景和行为有明显差异：
- 防抖：适合用户操作结束后再执行，比如输入完成后再发起请求，强调“最后的结果”。
- 节流：适合规律性地执行，比如每100ms更新一次位置，强调“过程中的均匀执行”。
- 防抖可能一次都不执行（如果一直触发），节流至少会按间隔执行一次。
实际使用建议
选择防抖还是节流，关键看业务需求：
- 输入搜索建议 → 用防抖，避免频繁请求接口。
- 无限滚动加载 → 用节流，防止滚动时频繁检查是否触底。
- 按钮提交防重复 → 用防抖或节流都可以，但更推荐使用状态锁或Promise控制。
现代框架中，也可以借助Lodash等工具库提供的 _.debounce 和 _.throttle 方法，减少重复造轮子。
基本上就这些，掌握防抖和节流的原理与使用，能显著提升交互体验和运行效率。不复杂但容易忽略细节，值得每个前端开发者熟练掌握。
