引言：高频事件触发的性能困境

在前端开发中，高频触发的事件（如滚动、输入、窗口调整）常常成为性能瓶颈。例如，用户快速输入时触发input事件，或滚动页面时触发scroll事件，若每次触发都执行复杂计算或网络请求，会导致页面卡顿甚至崩溃。此时，节流（throttle）与防抖（debounce）作为两种经典优化方案，能有效控制函数执行频率，提升应用性能。

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

1.1 核心原理

节流的核心思想是限制函数在指定时间间隔内最多执行一次。无论事件触发多么频繁，函数都会按照固定的时间间隔（如每200ms）执行一次，类似“水龙头匀速出水”。

1.2 代码实现

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

关键点：

• 记录上一次调用时间lastCall。
• 每次触发时检查当前时间与lastCall的差值，若超过delay则执行函数。

1.3 适用场景

• 滚动事件：如计算页面滚动位置并触发懒加载。

  window.addEventListener('scroll', throttle(() => {
    console.log('Scroll position:', window.scrollY);
  }, 200));

• 按钮高频点击：防止重复提交表单。
• 游戏循环：控制动画帧率（如每16ms更新一次画面）。

1.4 优势与局限

• 优势：保证函数定期执行，适合需要持续反馈的场景。
• 局限：无法处理事件结束后的最后一次触发。

二、防抖（Debounce）：延迟执行，最后触发

2.1 核心原理

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

2.2 代码实现

function debounce(func, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

关键点：

• 使用setTimeout延迟执行。
• 每次触发时清除之前的定时器，重新设置新定时器。

2.3 适用场景

• 搜索框输入：用户停止输入后发送请求。

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

• 窗口调整：避免resize事件频繁触发布局重排。
• 表单验证：用户输入完成后统一校验。

2.4 优势与局限

• 优势：减少无效调用，节省资源。
• 局限：若事件持续触发，函数可能永远不执行。

三、节流 vs 防抖：如何选择？

特性	节流（Throttle）	防抖（Debounce）
执行时机	固定间隔执行	停止触发后延迟执行
典型场景	滚动、游戏循环、按钮点击	搜索输入、窗口调整、表单验证
资源消耗	持续占用资源	延迟期间不占用资源
用户体验	实时反馈	延迟后集中处理

选择建议：

• 需要持续反馈（如滚动加载）时用节流。
• 需要最终结果（如搜索建议）时用防抖。

四、进阶技巧：结合立即执行

4.1 节流的立即执行模式

某些场景下，希望第一次触发时立即执行，后续按节流间隔执行：

function throttleImmediate(func, delay) {
  let lastCall = 0;
  let timeoutId;
  return function(...args) {
    const now = Date.now();
    const remaining = delay - (now - lastCall);
    if (remaining <= 0) {
      clearTimeout(timeoutId);
      func.apply(this, args);
      lastCall = now;
    } else if (!timeoutId) {
      timeoutId = setTimeout(() => {
        timeoutId = null;
        lastCall = Date.now();
      }, remaining);
      func.apply(this, args); // 立即执行
    }
  };
}

4.2 防抖的立即取消模式

允许在延迟期间通过返回值取消执行：

function debounceCancelable(func, delay) {
  let timeoutId;
  return function(...args) {
    const cancel = () => {
      clearTimeout(timeoutId);
      timeoutId = null;
    };
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
    return { cancel }; // 返回取消函数
  };
}

五、真实案例：优化搜索体验

5.1 未优化前的性能问题

// 未优化：每次输入都发送请求
document.getElementById('search').addEventListener('input', (e) => {
  fetch(`/api/search?q=${e.target.value}`); // 高频请求，性能差
});

5.2 优化方案：防抖 + 节流组合

const searchInput = document.getElementById('search');
let debouncedSearch = debounce((query) => {
  fetch(`/api/search?q=${query}`);
}, 500);
// 节流显示“搜索中”提示
let throttledShowLoading = throttle(() => {
  document.getElementById('loading').style.display = 'block';
}, 200);
searchInput.addEventListener('input', (e) => {
  throttledShowLoading(); // 实时显示加载状态
  debouncedSearch(e.target.value); // 延迟搜索
});

效果：

• 用户输入时立即显示“搜索中”提示（节流保证）。
• 用户停止输入500ms后发送搜索请求（防抖优化）。

六、总结与行动建议

1. 节流适用于需要持续反馈的场景（如滚动、动画）。
2. 防抖适用于需要最终结果的场景（如搜索、表单）。
3. 组合使用可兼顾实时性与性能（如案例中的搜索优化）。
4. 测试验证：使用Chrome DevTools的Performance面板分析优化效果。

行动建议：

• 在现有项目中检查高频事件（如scroll、resize、input）。
• 用节流/防抖重构相关代码，对比优化前后的性能差异。
• 参考Lodash等库的实现（如_.throttle、_.debounce）学习最佳实践。

通过掌握节流与防抖，开发者能显著提升前端应用的流畅度，为用户提供更优质的交互体验。