如何重置正在运行的async循环？解决主函数阻塞问题

核心问题在于旧的iterate实例始终卡在等待内部Promise的状态，没有被主动终止，导致外层foo一直阻塞在第一个await iterate()上。要实现重置功能，必须让旧循环能主动退出，同时让新循环接管执行。

推荐实现方案：使用AbortController #

利用AbortController提供的中止信号，让旧循环能检测到终止指令并及时退出，同时新循环可以正常启动。

async function foo() {
  let currentController;

  async function iterate(signal) {
    for (let i = 0; i < 5; i++) {
      // 检查是否收到中止信号，直接终止循环
      if (signal.aborted) break;

      // 改造内部Promise，支持监听中止信号
      const position = await new Promise((resolve, reject) => {
        // 绑定中止回调，触发时终止Promise
        const abortHandler = () => {
          reject(new Error('任务已中止'));
          signal.removeEventListener('abort', abortHandler);
        };
        signal.addEventListener('abort', abortHandler);

        // 替换为实际的用户操作逻辑，比如等待元素点击
        const userActionHandler = (e) => {
          resolve(e.target.dataset.position);
          someElement.removeEventListener('click', userActionHandler);
          signal.removeEventListener('abort', abortHandler);
        };
        someElement.addEventListener('click', userActionHandler);
      }).catch(err => {
        // 捕获中止错误，直接抛出以终止循环
        if (err.message === '任务已中止') throw err;
        // 处理其他错误
        throw err;
      });

      // 未中止时执行业务逻辑
      if (!signal.aborted) {
        console.log(`处理第${i+1}次迭代，位置：${position}`);
        // do stuff
      }
    }
  }

  button.onclick = async () => {
    // 中止当前运行的旧任务
    if (currentController) {
      currentController.abort();
    }
    // 创建新控制器并启动新循环
    currentController = new AbortController();
    try {
      await iterate(currentController.signal);
      console.log('新循环执行完成');
    } catch (err) {
      // 忽略中止错误，处理其他异常
      if (err.message !== '任务已中止') {
        console.error('循环执行出错：', err);
      }
    }
  };

  // 启动初始循环
  currentController = new AbortController();
  try {
    await iterate(currentController.signal);
    console.log('初始循环执行完成');
  } catch (err) {
    if (err.message !== '任务已中止') {
      console.error('初始循环出错：', err);
    }
  }
}

关键逻辑说明 #

• 中止信号管理：通过currentController变量跟踪当前运行的循环控制器，点击重置按钮时先中止旧信号，再创建新控制器启动新循环。
• 循环内检测：每次迭代开始前检查信号是否已中止，若已中止则直接跳出循环。
• Promise绑定中止：内部等待用户操作的Promise需要绑定中止回调，确保任务被中止时能立刻终止等待，避免旧循环一直阻塞。

简化方案：使用标记变量 #

如果不需要立即终止等待中的Promise，可以用一个简单的标记变量实现，缺点是旧循环会等到当前Promise完成后才退出：

async function foo() {
  let isCancelled = false;

  async function iterate() {
    isCancelled = false;
    for (let i = 0; i < 5; i++) {
      if (isCancelled) break;

      const position = await new Promise(resolve => {
        // 实际用户操作逻辑
        const handler = () => {
          resolve('模拟位置');
          element.removeEventListener('click', handler);
        };
        element.addEventListener('click', handler);
      });

      if (!isCancelled) {
        console.log(`处理第${i+1}次迭代`);
        // do stuff
      }
    }
  }

  button.onclick = async () => {
    isCancelled = true;
    await iterate();
  };

  await iterate();
}

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