在前端开发中，我们经常会遇到需要处理频繁触发的事件，比如搜索框输入、窗口调整、滚动事件等。这些事件如果处理不当，可能会导致性能问题。防抖(Debounce)和节流(Throttle)就是解决这类问题的两个重要技术。
什么是防抖？
防抖的核心思想是：在一定时间内，多次触发同一个函数，只执行最后一次。
应用场景
- 搜索框输入
- 窗口大小调整
- 表单验证
代码实现
function debounce<T extends (...args: any[]) => any>(
func: T,
wait: number
): (...args: Parameters<T>) => void {
let timeout: NodeJS.Timeout;
return function (...args: Parameters<T>) {
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(this, args);
}, wait);
};
}
// 使用示例
const handleSearch = debounce((query: string) => {
console.log('Searching for:', query);
}, 300);
什么是节流？
节流的核心思想是：在一定时间内，多次触发同一个函数，只执行第一次。
应用场景
- 滚动事件处理
- 游戏中的按键响应
- 拖拽事件
代码实现
function throttle<T extends (...args: any[]) => any>(
func: T,
wait: number
): (...args: Parameters<T>) => void {
let lastCall = 0;
return function (...args: Parameters<T>) {
const now = Date.now();
if (now - lastCall >= wait) {
func.apply(this, args);
lastCall = now;
}
};
}
// 使用示例
const handleScroll = throttle(() => {
console.log('Scrolling...');
}, 200);
主要区别
-
执行时机
- 防抖：等待用户操作结束后执行
- 节流：按照固定时间间隔执行
-
使用场景
- 防抖：适合处理用户输入等需要等待用户操作完成的场景
- 节流：适合处理需要持续响应的场景
-
效果
- 防抖：将多次操作合并为一次
- 节流：保证一定时间内只执行一次
实际应用示例
搜索框防抖
const searchInput = document.querySelector('input');
searchInput.addEventListener('input', debounce((e) => {
// 发起搜索请求
searchAPI(e.target.value);
}, 300));
滚动事件节流
window.addEventListener('scroll', throttle(() => {
// 处理滚动事件
updateScrollPosition();
}, 100));
选择建议
- 如果你需要等待用户完成操作后再执行，使用防抖
- 如果你需要在一定时间内保证执行一次，使用节流
- 如果事件触发频率很高，优先考虑节流
- 如果事件触发后需要等待用户操作完成，优先考虑防抖
总结
防抖和节流是前端性能优化的重要工具，它们能够有效控制函数的执行频率，提升用户体验。理解它们的区别和适用场景，能够帮助我们在实际开发中做出更好的选择。
记住：
- 防抖：等待用户操作完成
- 节流：保证执行频率
选择合适的方案，让你的应用性能更上一层楼！