如何在不依赖全局变量与可变数组的前提下实现取消按钮中断计算任务？

这个问题我之前做类似功能时也碰到过，用全局变量或者可变数组确实容易踩坑——比如多次点击提交按钮时，状态会混乱，而且全局状态在模块化代码里也显得很不优雅。其实现在有个更合适的方案：用浏览器原生的AbortController API，完全不需要全局状态，还能完美实现你的需求！

为什么原来的方案有问题？ #

先提一句，你原来的代码其实藏着个小bug：solve是异步函数（里面用了await），但handleSubmit是同步的，所以调用solve后会立刻执行allowedToRun[0] = false，导致solve里的循环刚启动就会退出，根本跑不起来。不过咱们用新方案的话，这个问题也会一起解决。

用AbortController实现优雅取消 #

AbortController是JS原生的API，专门用来取消异步任务。它的核心逻辑是：创建一个控制器，生成一个signal信号传给任务；当需要取消时，调用控制器的abort()方法，任务里就能检测到信号的中止状态，从而停止执行。

修改后的代码如下：

主文件代码

import { solve } from './solve.js';

// 仅用来跟踪当前运行的任务控制器，避免多任务冲突
let currentController = null;

async function handleSubmit() {
  // 如果已有任务在运行，先取消它（可选，根据你的业务需求调整）
  if (currentController) {
    currentController.abort();
  }
  
  const controller = new AbortController();
  currentController = controller;
  
  try {
    // 等待异步任务完成
    await solve(controller.signal);
  } catch (err) {
    // 专门捕获取消操作抛出的错误
    if (err.name === 'AbortError') {
      console.log('计算任务已被用户取消');
    } else {
      // 其他错误正常抛出
      throw err;
    }
  } finally {
    // 任务结束后清空控制器引用
    currentController = null;
  }
}

function handleCancel() {
  // 如果有正在运行的任务，触发取消
  if (currentController) {
    currentController.abort();
  }
}

solve.js代码

// 先实现你的sleep工具函数
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

export async function solve(signal) {
  let n = 0;
  
  // 每次循环都检查信号是否已中止
  while (n < 100000000 && !signal.aborted) {
    n++;
    console.log(n);
    await sleep(0);
  }
  
  // 如果是因为取消退出，抛出标准的AbortError
  if (signal.aborted) {
    throw new DOMException('任务被用户取消', 'AbortError');
  }
}

这个方案的优势 #

• 无全局/可变状态：取消信号是每个任务独立的，不会出现状态混乱的情况，完全符合模块化要求。
• 原生API兼容性好：现代浏览器和Node.js都支持AbortController，不需要引入额外依赖。
• 逻辑清晰：取消操作和任务执行的边界明确，代码可读性更高，后期维护也更方便。

备注：内容来源于stack exchange，提问作者713sean