4

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

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 中可能是不可能的，因为它是单线程的，并且任何时候只能运行一个函数。我对么？

4

1 回答 1

10

您可以使用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();
}
于 2013-06-09T08:06:23.250 回答