什么是节流和防抖函数？

节流（Throttle）和防抖（Debounce）是优化高频前端事件的技术，用于限制事件处理函数的调用频率，提升性能和用户体验。

防抖函数（Debounce）

原理：事件触发后延迟一段时间执行回调函数；如果在延迟期间再次触发事件，则重置计时器。效果类似电梯关门：最后一人进入后延迟 N 秒才关门，期间新增人员会重新计时。
适用场景：

1. 搜索框联想输入（等待用户停止输入后请求）
2. 文本编辑器自动保存
3. 窗口 resize 结束后重新计算布局

节流函数（Throttle）

原理：在指定时间间隔内只执行一次回调函数，忽略其间触发的其他事件。类似于水龙头限流阀：保持匀速流水而不受开关频率影响。
适用场景：

1. 页面滚动事件监听（如加载更多内容）
2. 防止按钮重复提交点击
3. 鼠标移动跟踪（限制数据发送频率）

两者区别

• 防抖：以「最后触发动作为主导」，确保连续触发后只执行一次。
• 节流：以「固定频率主导」，保证均匀执行忽略超额触发。

代码实现

防抖实现（利用定时器）：

function debounce(func, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}
// 示例
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(handleSearch, 500));

节流实现（时间戳版）：

function throttle(func, interval) {
  let lastTime = 0;
  return function(...args) {
    const currentTime = Date.now();
    if (currentTime - lastTime >= interval) {
      func.apply(this, args);
      lastTime = currentTime;
    }
  };
}
// 示例
window.addEventListener('scroll', throttle(handleScroll, 100));