防抖 & 节流

防抖（Debounce）

防抖是指当事件被触发后，延迟一段时间执行回调函数。如果在延迟期间事件又被触发，则重新计时。

特点：

延迟执行，只执行最后一次
适合处理连续高频触发的事件，只需要最后一次的结果

// 简单实现
function debounce(func, delay) {
    let timer = null;
    return function(...args) {
        clearTimeout(timer);
        timer = setTimeout(() => {
            func.apply(this, args);
        }, delay);
    };
}

节流（Throttle）

节流是指在一定时间间隔内，只执行一次回调函数。

特点：

固定频率执行
适合处理连续高频触发，但需要保持一定执行频率的事件

// 简单实现
function throttle(func, interval) {
    let lastTime = 0;
    return function(...args) {
        const now = Date.now();
        if (now - lastTime >= interval) {
            lastTime = now;
            func.apply(this, args);
        }
    };
}

联系与区别

相同点：

都是优化高频触发事件的性能手段
都用于减少函数不必要的执行次数
都需要设置时间参数

不同点：

特性	防抖	节流
执行时机	事件结束后延迟执行	固定时间间隔执行
重新计时	每次触发都会重置计时	不会重置，到点就执行
结果保证	只保证最后一次结果	保证间隔内的结果
适合场景	只需最后一次结果	需要保持一定频率

使用场景

防抖的具体场景：

搜索框输入 - 用户输入时，只发送最后一次输入的搜索请求

// 用户连续输入时，只在停止输入300ms后搜索
const searchInput = document.getElementById('search');
const debouncedSearch = debounce(search, 300);

searchInput.addEventListener('input', (e) => {
    debouncedSearch(e.target.value);
});

function search(keyword) {
    console.log('发送搜索请求:', keyword);
    // 实际会发送API请求
}

窗口resize事件 - 窗口调整完成后执行

// 只在窗口调整结束后计算布局
window.addEventListener('resize', debounce(() => {
    calculateLayout();
}, 250));

节流的具体场景：

滚动加载更多 - 滚动时固定间隔检查位置

// 每200ms检查一次是否需要加载
window.addEventListener('scroll', throttle(() => {
    if (isNearBottom()) {
        loadMore();
    }
}, 200));

鼠标移动事件 - 拖拽或绘图时减少更新频率

// 每16ms更新一次位置（约60fps）
element.addEventListener('mousemove', throttle(updatePosition, 16));

实时图表更新 - 控制数据刷新频率

// 每秒最多更新4次图表
socket.on('data', throttle(updateChart, 250));

总结

为什么要使用：

性能优化：减少不必要的函数执行，降低CPU使用率
防止资源浪费：减少API请求、DOM操作等
提升用户体验：避免卡顿，使交互更流畅
避免错误：如防止重复提交表单

选择原则：

防抖：关注结果，不关心过程（如搜索）
节流：保持过程，但控制频率（如滚动、拖拽）

在实际项目中，通常根据具体业务需求选择合适的技术，有时候也会结合使用。现代前端框架如React、Vue中，这些技术同样重要，可以通过Hooks或第三方库（如lodash）方便地使用。