如何在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
    }

}

然后在按钮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();
}