引言：高频事件的性能陷阱

在前端开发中，滚动（scroll）、输入（input）、窗口调整（resize）等高频触发事件常导致性能问题。例如，用户快速输入时，若每次按键都触发搜索请求，不仅浪费服务器资源，还会造成界面卡顿。此时，节流（throttle）与防抖（debounce）技术通过控制函数执行频率，成为优化性能的关键手段。

一、节流（Throttle）：固定频率执行

1.1 核心原理

节流的核心是“限制函数在指定时间间隔内最多执行一次”。无论事件触发多频繁，函数仅在时间窗口结束时执行一次（或开始时执行一次），类似水龙头的“匀速出水”。

1.2 实现方式

function throttle(fn, delay) {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTime >= delay) {
      fn.apply(this, args);
      lastTime = now;
    }
  };
}

关键点：

• 使用时间戳记录上次执行时间。
• 仅当当前时间与上次执行时间的差值≥delay时，触发函数。

1.3 适用场景

• 滚动加载：防止快速滚动时频繁请求数据。
• 动画控制：如requestAnimationFrame的节流封装。
• 按钮高频点击：防止重复提交表单。

案例：滚动加载商品列表

window.addEventListener('scroll', throttle(() => {
  if (window.innerHeight + document.documentElement.scrollTop 
      >= document.documentElement.offsetHeight - 500) {
    loadMoreProducts();
  }
}, 200));

二、防抖（Debounce）：延迟后执行

2.1 核心原理

防抖的核心是“等待事件停止触发一段时间后再执行”。若在延迟时间内事件再次触发，则重新计时，类似电梯门“等待最后一人”。

2.2 实现方式

function debounce(fn, delay) {
  let timer = null;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

关键点：

• 每次触发事件时清除之前的定时器。
• 仅在延迟时间内无新触发时执行函数。

2.3 适用场景

• 搜索框输入：用户停止输入后发送请求。
• 窗口调整：防止resize事件频繁触发布局重算。
• 表单验证：输入完成后统一校验。

案例：搜索框防抖

const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce((e) => {
  fetch(`/api/search?q=${e.target.value}`).then(/* ... */);
}, 300));

三、节流与防抖的对比与选择

特性	节流（Throttle）	防抖（Debounce）
执行时机	固定时间间隔执行	停止触发后延迟执行
适用场景	需要持续反馈（如滚动、动画）	需要最终结果（如输入完成、调整结束）
资源消耗	较高（固定频率执行）	较低（仅最后一次触发后执行）

选择建议：

• 若需实时反馈（如滚动加载），优先用节流。
• 若需等待用户操作完成（如搜索），优先用防抖。

四、进阶技巧与注意事项

4.1 立即执行版节流

默认节流在时间窗口结束时执行，若需在开始时执行：

function throttleImmediate(fn, delay) {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTime < delay) return;
    lastTime = now;
    fn.apply(this, args);
  };
}

4.2 取消功能

为防抖/节流函数添加取消能力：

function debounceCancelable(fn, delay) {
  let timer = null;
  const debounced = function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
  debounced.cancel = () => clearTimeout(timer);
  return debounced;
}
// 使用
const debouncedFn = debounceCancelable(() => console.log('Done'), 500);
debouncedFn.cancel(); // 取消执行

4.3 性能监控

结合performance.now()监控函数执行时间：

function throttleWithMonitor(fn, delay) {
  let lastTime = 0;
  return function(...args) {
    const now = performance.now();
    if (now - lastTime >= delay) {
      const start = performance.now();
      fn.apply(this, args);
      console.log(`Execution time: ${performance.now() - start}ms`);
      lastTime = now;
    }
  };
}

五、实际应用中的综合案例

5.1 表单自动保存

用户输入时防抖，停止输入3秒后保存：

const form = document.getElementById('autoSaveForm');
form.addEventListener('input', debounce(() => {
  saveFormData();
}, 3000));

5.2 地图拖拽优化

地图拖拽时节流，每100ms更新一次视图：

map.on('drag', throttle(() => {
  updateMapView();
}, 100));

5.3 无限滚动列表

结合节流与Intersection Observer：

const observer = new IntersectionObserver(throttle((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      loadMoreItems();
    }
  });
}, 200));
observer.observe(document.getElementById('loader'));

六、总结与最佳实践

1. 优先使用库函数：Lodash的_.throttle和_.debounce已处理边界情况（如this绑定、取消功能）。
2. 合理设置延迟时间：防抖通常设为200-500ms，节流根据场景调整（如滚动可设100-200ms）。
3. 避免过度优化：仅在高频事件导致性能问题时使用。
4. 测试验证：使用Chrome DevTools的Performance面板监控实际效果。

通过掌握节流与防抖技术，开发者可显著提升前端应用的响应速度与用户体验，避免因高频事件导致的性能瓶颈。