防抖与节流：前端性能优化的黄金拍档

📖 目录

1. 什么是防抖与节流？
2. 生活中的类比
3. 应用场景对比
4. 手把手代码实现
5. 使用注意事项

一、什么是防抖与节流？

防抖（Debounce）

定义：当事件连续触发时，只有停止触发超过指定时间后，才会执行一次处理函数。

效果：类似电梯关门机制，最后一个人进入后等待2秒才关门

节流（Throttle）

定义：事件持续触发时，保证在指定时间间隔内只执行一次处理函数

效果：类似水龙头限流阀，无论怎么拧开关，水流都会匀速流出

二、生活中的类比

场景	防抖	节流
电梯运行	最后一人进入后关门	每2分钟自动关门一次
射击游戏	松开扳机后射击	每秒自动射击3发子弹
自动保存	停止输入3秒后保存	每隔1分钟自动保存

三、应用场景对比

防抖适用场景

1. 搜索框输入联想（停止输入后触发）
2. 窗口resize结束计算布局
3. 文本编辑器自动保存

节流适用场景

1. 滚动加载更多内容
2. 射击游戏连发功能
3. 鼠标移动轨迹记录

四、手把手代码实现

防抖基础版

function debounce(func, wait) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, arguments);
    }, wait);
  };
}

// 使用示例
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(searchHandler, 500));

节流基础版（时间戳版）

function throttle(func, wait) {
  let lastTime = 0;
  return function() {
    const now = Date.now();
    if (now - lastTime >= wait) {
      func.apply(this, arguments);
      lastTime = now;
    }
  };
}

// 使用示例
window.addEventListener('scroll', throttle(handleScroll, 200));

五、使用注意事项

1. 合理设置等待时间：防抖建议200-500ms，节流建议16-100ms（对应60fps）
2. 首次立即执行：某些场景需要立即响应（如按钮提交）
3. 取消机制：防抖需要提供cancel方法
4. 内存泄漏：及时清除定时器
5. 返回值处理：高阶函数可能丢失原函数返回值

---

📌 小测试：以下场景该用防抖还是节流？

1. 用户拖动调整元素大小：（ ）
2. 射击游戏按住空格连发：（ ）
3. 聊天窗口输入@自动弹出成员列表：（ ）

（答案：1.节流 2.节流 3.防抖）

---

✨ 总结：防抖关注最终状态，节流关注过程频率。掌握这两个技能，能让你的网页如丝般顺滑！