如何终止已在call stack中的async for loop，解决重复点击搜索异常问题

核心思路是通过终止标识主动中断上一轮未完成的异步循环和网络请求，具体改造步骤如下：

• 首先在全局作用域声明两个变量，分别存储上一轮搜索的终止控制器和循环中断标记：

// 用于终止未完成的fetch请求
let lastSearchAbortController = null;
// 用于标记上一轮循环需要终止
let terminateLastLoop = false;

• 改造搜索按钮的点击事件，每次触发新搜索前先终止上一轮任务：

searchButton.addEventListener("click", (e) => {
  e.preventDefault();
  // 终止上一轮未完成的网络请求
  if (lastSearchAbortController) {
    lastSearchAbortController.abort();
  }
  // 标记上一轮循环停止执行
  terminateLastLoop = true;
  // 重置标记用于本次新任务
  terminateLastLoop = false;
  // 初始化本次任务的终止控制器
  lastSearchAbortController = new AbortController();
  // 启动本次搜索任务，传入终止信号
  getPrice(data, lastSearchAbortController.signal);
})

• 改造getPrice异步函数，每次循环前先判断是否需要终止：

async function getPrice(data, signal) {
  for (singleResult of data) {
    // 检测到终止信号直接跳出循环，不再执行后续逻辑
    if (signal.aborted || terminateLastLoop) break;
    // 把终止信号传入fetchWeb，用于中断请求
    await fetchWeb(Title, signal);
  }
}

• 调整fetchWeb的封装，兼容AbortSignal入参，如果你是基于原生fetch封装的，只需要把信号传入fetch配置即可：

async function fetchWeb(title, signal) {
  const response = await fetch('你的请求地址', {
    signal,
    // 原有其他请求配置保持不变
  });
  // 原有后续处理逻辑保持不变
}

实现说明 #

• 调用AbortController.abort()会直接中断所有关联的未完成请求，避免无效请求占用带宽和服务器资源
• 每次循环开始前的终止判断，会在请求返回后直接终止上一轮的后续循环，不会出现新旧任务逻辑交叉的问题
• 如果不需要终止已发送的请求，也可以仅保留terminateLastLoop标记逻辑，只中断后续循环执行即可

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