javascript - 如何中断和停止 JavaScript 中正在运行的函数？

Question

我有几个按钮，每个按钮都计算一些数字并将其显示在屏幕上。不同的按钮需要不同的时间来完成计算。在我当前的实现中，如果我单击一个按钮，然后在第一个按钮完成之前单击另一个按钮，则第二个按钮的结果仅在第一个按钮完成后显示。我该如何修改它，以便在我单击第二个按钮后立即停止由第一个按钮启动的计算并继续计算？

HTML

<input type="button" value="One" onclick="displayNumber(1)">
<input type="button" value="Two" onclick="displayNumber(2)">
....

JavaScript

function displayNumber(id) {
    alert(calculateAwesomeNumber(id));
}

这在 JavaScript 中可能是不可能的，因为它是单线程的，并且任何时候只能运行一个函数。我说得对吗？

Answer 1

您可以使用 WebWorkers .

这将在单独的线程中工作，并允许您在不干扰 UI 线程的情况下进行繁重的计算。

您可以向工作人员发出停止信号。

有关如何使用的示例，请参见此处:
http://www.html5rocks.com/en/tutorials/workers/basics/
https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers

如果 WebWorkers 不是一个选项，您可以使用一个标志来强制该函数停止:

var _stop;

function displayNumber(num) {

    _stop = false;

    while(!_stop) {
        //calc
    }

}

然后在 button2 上单击:

<input type="button" value="Two" onclick="_stop=true;displayNumber(2)">

您可以在每个计算段完成后检查 _stop 而不是循环。

请注意，如果计算时间长且繁忙，您可能要等到计算完成后才能收到按钮的响应。您可以在计算中不时使用 setTimout(..., 0) 以允许执行其他事件。

如何实现它取决于您用于计算的代码。

您可以像这样分解计算:

function displayNumber(num) {

    var forCalculation;

    function step1() {
        //calc step 1 you have access to forCalculation and num vars here
        if (_stop) return;
        setTimeout(step2, 0);
    }

    function step2() {
        //calc step 2 you have access to forCalculation and num vars here
        if (_stop) return;
        setTimeout(step3, 0);
    }
    function step3() {
        //calc step 3 you have access to forCalculation and num vars here
        if (_stop) return;
    }
    step1();
}