目录
引言：为什么需要防抖和节流？
在现代Web开发中，我们经常需要处理各种高频触发的事件，如：
窗口大小调整（resize）
输入框实时搜索（input）
页面滚动（scroll）
鼠标移动（mousemove）
如果每次事件触发都立即执行回调函数，可能会导致严重的性能问题，甚至页面卡顿。防抖（Debounce）和节流（Throttle）就是为解决这类问题而生的两种核心技术。
防抖（Debounce）技术详解
核心原理
防抖的核心思想是：在事件被触发后，等待一段时间再执行回调。如果在这段等待时间内事件又被触发，则重新计时。
应用场景
搜索框输入建议（用户停止输入后再发送请求）
窗口大小调整（调整完成后执行布局计算）
表单验证（用户停止输入后再验证）
按钮防重复点击（防止用户多次提交）
代码实现
function debounce(func, delay = 300) {
let timer = null;
return function(...args) {
// 清除之前的定时器
clearTimeout(timer);
// 设置新的定时器
timer = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
// 使用示例
const searchInput = document.getElementById('search');
const debouncedSearch = debounce(searchAPI, 500);
searchInput.addEventListener('input', debouncedSearch);执行流程
用户开始输入
每次按键触发input事件
防抖函数重置计时器
用户停止输入500ms后
执行搜索API请求
节流（Throttle）技术详解
核心原理
节流的核心思想是：在一定时间间隔内，无论事件触发多少次，只执行一次回调函数。
应用场景
页面滚动事件（无限滚动加载）
鼠标移动事件（如元素拖拽）
游戏中的按键处理（防止连续按键过多操作）
性能监控数据的采集
代码实现
function throttle(func, limit = 300) {
let lastTime = 0;
return function(...args) {
const now = Date.now();
// 检查是否达到时间间隔
if (now - lastTime >= limit) {
func.apply(this, args);
lastTime = now;
}
};
}
// 使用示例
window.addEventListener('scroll', throttle(handleScroll, 200));
执行流程
用户滚动页面
scroll事件高频触发
节流函数检查时间间隔
每200ms最多执行一次回调
执行滚动处理逻辑
防抖 vs 节流：核心区别
| 特性 | 防抖(Debounce) | 节流(Throttle) |
|---|---|---|
| 执行时机 | 等待事件停止后执行 | 固定时间间隔执行 |
| 关注点 | 最终状态（如输入完成） | 过程状态（如滚动位置） |
| 执行次数 | 事件停止后只执行一次 | 固定间隔执行多次 |
| 类比 | 电梯等人（门关上才走） | 地铁发车（固定时间发车） |
| 适用场景 | 搜索建议、窗口调整、表单验证 | 滚动加载、鼠标移动、游戏操作 |
高级实现技巧
带立即执行选项的防抖
function debounce(func, delay = 300, immediate = false) {
let timer = null;
return function(...args) {
const callNow = immediate && !timer;
clearTimeout(timer);
timer = setTimeout(() => {
if (!immediate) func.apply(this, args);
timer = null;
}, delay);
if (callNow) func.apply(this, args);
};
}
带尾调用保证的节流
function throttle(func, limit = 300) {
let lastTime = 0;
let timer = null;
return function(...args) {
const now = Date.now();
const remaining = limit - (now - lastTime);
if (remaining <= 0) {
if (timer) {
clearTimeout(timer);
timer = null;
}
func.apply(this, args);
lastTime = now;
} else if (!timer) {
timer = setTimeout(() => {
func.apply(this, args);
lastTime = Date.now();
timer = null;
}, remaining);
}
};
}
实际应用建议
搜索功能：使用防抖（300-500ms延迟），避免每次输入都发送请求
无限滚动：使用节流（200-300ms间隔），定期检查滚动位置
窗口调整：防抖（100ms延迟）处理重布局，避免频繁重排
鼠标移动跟踪：节流（16ms≈60fps）保证流畅的动画效果
复杂计算：防抖确保只在用户停止交互后执行
总结
防抖和节流是前端性能优化的重要技术，理解它们的差异并正确应用能显著提升用户体验：
当只关心最终状态时，使用防抖
当需要定期更新时，使用节流
根据实际场景调整延迟时间（100ms-1000ms）
现代前端库（如Lodash）提供了高度优化的实现
掌握这两种技术，你就能优雅地处理各种高频事件，打造更流畅的Web应用！