概述
在日常开发中，异步操作的时序问题是非常常见的坑。特别是在处理用户输入、网络请求等场景时，如果不加以控制，很容易出现竞态条件（Race Condition），导致数据错乱或界面异常。本文总结了该问题的现象、原因及解决方案。

说明
竞态条件是指多个异步操作的执行顺序不确定，导致最终结果不符合预期。典型场景包括：

- 用户快速连续点击按钮触发多次请求
- 搜索框输入时频繁触发搜索请求
- 多个异步回调的执行顺序不确定

问题 ：当快速输入"apple"，会依次发起

1. /api/search?keyword=a
2. /api/search?keyword=ap
3. /api/search?keyword=app
4. /api/search?keyword=appl
5. /api/search?keyword=apple
由于网络延迟，可能 app 的响应比 apple 晚到达，导致显示错误结果。

解决方案：延迟执行，在指定时间内如果再次触发则重新计时

// ✅ 防抖实现
function debounce<T extends (...args: unknown[]) => void>(
  fn: T, 
  delay: number
): T {
  let timerId: ReturnType<typeof setTimeout> | null = null;
  
  return ((...args: unknown[]) => {
    // 清除之前的定时器
    if (timerId) {
      clearTimeout(timerId);
    }
    
    // 重新设置定时器
    timerId = setTimeout(() => {
      fn(...args);
      timerId = null;
    }, delay);
  }) as T;
}

// 使用示例
class SearchComponent {
  constructor() {
    // 输入停止 300ms 后才发起搜索
    this.handleInput = debounce(this.handleInput.bind(this), 300);
  }
  
  async handleInput(value: string) {
    const result = await fetch(`/api/search?keyword=${value}`);
    this.displayResult(result);
  }
}