如何停止已经在调用堆栈中的异步 for 循环？

Question

当用户第一次点击搜索按钮时，它会正常工作，并且需要大约 30 秒来获取所有数据，因此如果用户决定使用新的搜索词再次点击搜索按钮，一切都会变得一团糟，因为之前的异步循环还没有完成。请帮助找到一个解决方案来终止之前的调用堆栈并重新启动进程而不继续之前的循环。

searchButton.addEventListener("click", (e) => {
e.preventDefault();
getPrice(data);
}

async function getPrice(data) {
  for (singleResult of data) {
      await fetchWeb(Title)
  }
}

Answer 1

使用全局点击计数器：

let calls = 0;
searchButton.addEventListener("click", (e) => {
  e.preventDefault();
  getPrice(data, ++calls);
}

async function getPrice(data, id) {
  for (singleResult of data) {
    if (id !== calls) break;
//  ^^^^^^^^^^^^^^^^^^^^^^^^
    await fetchWeb(Title)
  }
}

一旦calls改变，当前活动的循环将停止。