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
    }

}

然后在按钮2上点击：

<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();
}

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

1 个答案: