防抖通过延迟执行并重置定时器确保事件停止后仅执行一次，适用于搜索输入等场景；节流则通过时间间隔控制频率，保证周期性执行，适合滚动监听、按钮防抖等高频事件优化。
在前端开发中，频繁触发事件（如窗口滚动、输入框输入、鼠标移动）会带来性能问题。防抖（Debounce）和节流（Throttle）是两种常用的优化手段，用于控制函数执行频率，减少资源消耗。
防抖：只执行最后一次操作
防抖的核心思想是：当事件被触发后，设置一个延迟，如果在这段时间内事件再次被触发，则重新计时，直到某次触发后延迟时间内没有新触发，才真正执行函数。
适用于搜索框输入联想、窗口大小调整后重新渲染等场景。
实现方式：
使用 setTimeout 和 clearTimeout 控制延迟执行。
function debounce(func, delay) {
let timer = null;
return function (...args) {
const context = this;
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(context, args);
}, delay);
};
}使用示例：
```javascript const searchInput = document.getElementById('search'); searchInput.addEventListener('input', debounce(function (e) { console.log('搜索:', e.target.value); }, 300)); ```这样，用户输入停止300毫秒后才会发起请求，避免每次输入都调用接口。
节流：固定时间执行一次
节流的策略是：无论事件触发多频繁，函数在指定时间间隔内最多执行一次。
适合处理高频事件如页面滚动、鼠标移动、按钮点击防重复提交等。
实现方式（时间戳版本）：
function throttle(func, delay) {
let previous = 0;
return function (...args) {
const now = Date.now();
const context = this;
if (now - previous >= delay) {
func.apply(context, args);
previous = now;
}
};
}定时器版本（更平滑）：
function throttle(func, delay) {
let timer = null;
return function (...args) {
const context = this;
if (!timer) {
timer = setTimeout(() => {
func.apply(context, args);
timer = null;
}, delay);
}
};
}使用示例：
```javascript window.addEventListener('scroll', throttle(() => { console.log('页面滚动'); }, 100)); ```每100毫秒最多输出一次“页面滚动”，防止事件回调过于密集。
防抖与节流的区别总结
- 防抖：事件停止触发后延迟执行，中间任何一次新触发都会重置计时。
- 节流：保证在一定时间周期内至少执行一次，控制频率。
- 比如连续快速滚动页面，防抖可能一次都不执行（一直触发），而节流会每隔一段时间执行一次。
实际项目中的优化建议
- 搜索输入推荐使用防抖，减少无效请求。
- 滚动加载、监听视口变化使用节流，确保及时响应。
- 按钮防重复点击可用节流，限制点击间隔。
- 结合业务场景选择合适的时间间隔，300ms~500ms是常见防抖延迟值。
基本上就这些。掌握防抖和节流的原理与实现，能显著提升前端性能和用户体验。不复杂但容易忽略细节，比如 this 指向和参数传递，记得用 apply 正确绑定上下文。
