如何使取消按钮停止此计算?

Question

我有三个函数，handlessubmit handleCancel和solve。handlessubmit触发一个计算量很大的进程，求解。handleccancel应该尽早停止该进程。

我的简化代码是这样的:

import { solve } from './solve.js';
let AllowedToRun = [false];
function handleSubmit() {
allowedToRun[0] = true;
solve(allowedToRun);
allowedToRun[0] = false;
}
function handleCancel() {
allowedToRun[0] = false;
}

// solve.js
function solve(allowedToRun) {
let n = 0;
while (n < 100000000 && allowedToRun[0]) {
n++;
console.log(n);
await sleep(0); // unblock UI by chunking compute
}
}

本质上，一旦用户单击submit，一个计算量很大的操作就开始运行。我用await sleep(0)(一个承诺的setTimeout)块计算，允许UI响应。如果用户在任何时候单击cancel，我将改变allowedToRun，这将导致solve中的while循环失败，提前取消计算。

这很好，它可以工作，但我希望在不使用变异数组和/或全局变量的情况下具有此功能。有没有办法不用那个就能做到?我还想导入solve，所以我不能在我的解决方案中使用任何模块级变量。

Answer 1

我希望在不使用变异数组和/或全局变量的情况下具有此功能

标准的解决方案是使用AbortSignal，而不是数组。但无论哪种方式，它都是一个对象携带状态，你必须改变它。

function solve(abortSignal) {
let n = 0;
while (n < 100000000 && !abortSignal.aborted) {
n++;
console.log(n);
await sleep(0); // unblock UI by chunking compute
}
}

或最好

function solve(abortSignal) {
abortSignal.throwIfAborted();
let n = 0;
while (n < 100000000) {
n++;
console.log(n);
await sleep(0, abortSignal); // unblock UI by chunking compute
}
}