如何让handleCancel中断solve计算且不依赖全局变量？

我有三个函数：handleSubmit、handleCancel和solve。handleSubmit会触发计算密集型的solve函数，handleCancel需要提前终止该计算流程。

简化代码如下：

function handleSubmit() {
  computeHeavyProcess();
}

function handleCancel() {
  // 不知道这里该写什么，也不清楚该怎么设计
}

function solve() {
  while (computationNotDone) {
    // 执行计算逻辑
    setSolutionState(resultOfCurrentComputations); // 每次循环更新React状态
    await sleep(0); // 拆分计算任务，避免阻塞UI
  }
}

期望实现的交互逻辑：

• 用户触发handleSubmit时，计算任务启动；
• 计算过程中定期更新状态，拆分计算任务以保证UI响应性；
• 用户触发handleCancel时，计算任务立即终止。

我想到过用全局变量allowedToRun，调用handleCancel时把它设为false，然后在solve的循环里判断while (computationNotDone && allowedToRun)。但我不想用全局变量，觉得这样代码设计不好。另外我需要导入solve函数，所以也不想用封装对象来用模块级变量，求相关设计建议。

方案1：使用原生AbortController（推荐） #

这是现代JavaScript的标准解决方案，无需全局变量，能优雅实现任务终止，完全适配异步流程。

实现步骤 #

1. 在React组件中用状态保存AbortController实例，确保组件重新渲染时不会丢失引用；
2. handleSubmit时初始化控制器，将signal作为参数传给solve函数；
3. solve函数在循环中检查signal.aborted状态，判断是否需要终止计算；
4. handleCancel时调用控制器的abort()方法触发终止。

完整代码示例 #

import { useState } from 'react';

function YourComponent() {
  const [abortController, setAbortController] = useState(null);

  async function handleSubmit() {
    // 先终止之前可能未完成的任务
    if (abortController) abortController.abort();
    const controller = new AbortController();
    setAbortController(controller);
    await solve(controller.signal);
    setAbortController(null); // 任务完成后清空引用
  }

  function handleCancel() {
    abortController?.abort();
    setAbortController(null);
  }

  return (
    <div>
      <button onClick={handleSubmit}>开始计算</button>
      <button onClick={handleCancel} disabled={!abortController}>取消计算</button>
    </div>
  );
}

// 可单独导入的solve函数
async function solve(signal) {
  let computationNotDone = true;
  while (computationNotDone && !signal.aborted) {
    // 执行单次计算逻辑
    const resultOfCurrentComputations = /* 你的计算结果 */;
    setSolutionState(resultOfCurrentComputations); // 更新React状态
    await sleep(0);

    // 根据计算进度更新终止条件
    // computationNotDone = checkIfComputationNeedsToContinue();
  }

  if (signal.aborted) {
    // 可添加终止后的清理逻辑
    console.log("计算已被取消");
  }
}

// 辅助sleep函数，拆分计算避免阻塞UI
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

方案优势 #

• 无全局/模块级变量，通过参数传递终止信号，符合模块化设计；
• AbortController是原生API，浏览器和Node.js均广泛支持；
• 可在solve函数的任意异步节点检查终止信号，灵活性高；
• React组件通过状态管理控制器实例，避免引用丢失。

方案2：使用生成器函数（Generator） #

如果计算流程可拆分为独立迭代步骤，可通过生成器将计算控制权交给外部组件，取消时直接停止调用生成器即可。

完整代码示例 #

import { useState, useRef } from 'react';

function YourComponent() {
  const generatorRef = useRef(null);

  async function handleSubmit() {
    // 终止之前的任务
    if (generatorRef.current) {
      generatorRef.current = null;
    }
    generatorRef.current = solveGenerator();
    await runGenerator();
  }

  async function runGenerator() {
    const gen = generatorRef.current;
    if (!gen) return;
    let result = gen.next();
    while (!result.done && generatorRef.current === gen) {
      const resultOfCurrentComputations = result.value;
      setSolutionState(resultOfCurrentComputations); // 更新状态
      await sleep(0);
      result = gen.next();
    }
    generatorRef.current = null;
  }

  function handleCancel() {
    generatorRef.current = null;
  }

  return (
    <div>
      <button onClick={handleSubmit}>开始计算</button>
      <button onClick={handleCancel} disabled={!generatorRef.current}>取消计算</button>
    </div>
  );
}

// 生成器版本的solve函数，可单独导入
function* solveGenerator() {
  let computationNotDone = true;
  while (computationNotDone) {
    // 执行单次计算逻辑
    const result = /* 你的计算结果 */;
    yield result; // 将当前计算结果返回给外部驱动逻辑

    // 更新计算终止条件
    // computationNotDone = checkIfComputationNeedsToContinue();
  }
}

方案优势 #

• 计算逻辑控制权完全交给外部组件，取消逻辑简单直接；
• 适合步骤清晰、可拆分为独立迭代的计算场景；
• 无需全局变量，通过React的useRef保存生成器引用。

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