如何让setTimeout无需等待async回调完成返回ID？解决定时器泄漏

你的问题核心在于：组件卸载时，componentWillUnmount只能清除当时记录的旧定时器ID，但API请求完成后（此时组件已卸载）仍会创建新的定时器，且这个新ID没被跟踪，导致轮询无法停止。

setTimeout本身是同步执行的，调用后立刻返回ID，不存在"等待async回调完成才返回ID"的问题——你代码里的延迟是因为setTimeout被放在了await之后，只有等API请求结束才会执行它。

解决这个问题的关键是在组件卸载后，阻止新定时器的创建，具体可以通过以下两种方式实现：

方法一：添加卸载标志位 #

在组件中维护一个标志位，标记组件是否已卸载，创建新定时器前先检查这个标志：

componentDidMount() {
  this.isUnmounted = false;
  this.pollingId = setTimeout(this.someOtherFunc, 2000);
}

componentWillUnmount() {
  this.isUnmounted = true;
  clearTimeout(this.pollingId);
}

someOtherFunc = async () => {
  try {
    await axios.get('/some/api');
  } finally {
    // 组件已卸载则直接返回，不创建新定时器
    if (this.isUnmounted) return;

    clearTimeout(this.pollingId);
    if (someConditionToContinuePolling) {
      this.pollingId = setTimeout(this.someOtherFunc, 2000);
    }
  }
}

方法二：用集合跟踪所有定时器ID #

如果担心有多个未处理的定时器，可以用一个集合存储所有定时器ID，卸载时批量清除：

componentDidMount() {
  this.timerIds = new Set();
  const id = setTimeout(this.someOtherFunc, 2000);
  this.timerIds.add(id);
}

componentWillUnmount() {
  this.timerIds.forEach(id => clearTimeout(id));
}

someOtherFunc = async () => {
  try {
    await axios.get('/some/api');
  } finally {
    this.timerIds.forEach(id => clearTimeout(id));
    this.timerIds.clear();

    if (someConditionToContinuePolling) {
      const id = setTimeout(this.someOtherFunc, 2000);
      this.timerIds.add(id);
    }
  }
}

两种方法里，方法一更轻量，适合你的场景——毕竟你不介意当前请求完成，只需要阻止后续新定时器的创建即可。

内容的提问来源于stack exchange，提问作者Nicki Evans