I have several buttons and each calculates some numbers and displays it on screen. Different buttons take differnet amount of time to finish calculation. In my current implementation, if I click on a button and then click on a different button before the first one finishes, the result from the second button is displayed only after the first one finishes. How can I modify this that as soon as I click the second button, it stops the calculation initiated by the first button and continues with its calculation?

HTML

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

JavaScript

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

This may be not possbile in JavaScript as it is single-threaded and only one function can be running at any time. Am I correct?

I have several buttons and each calculates some numbers and displays it on screen. Different buttons take differnet amount of time to finish calculation. In my current implementation, if I click on a button and then click on a different button before the first one finishes, the result from the second button is displayed only after the first one finishes. How can I modify this that as soon as I click the second button, it stops the calculation initiated by the first button and continues with its calculation?

HTML

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

JavaScript

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

This may be not possbile in JavaScript as it is single-threaded and only one function can be running at any time. Am I correct?

• javascript

• try to use setTimeout function: developer.mozilla/en-US/docs/Web/API/window.setTimeout – Ivan Chernykh Commented Jun 9, 2013 at 7:54
• could you post the code for calculateAwesomeNumner? – lelloman Commented Jun 9, 2013 at 8:05
• @lelloman, calculateAwesomeNumber is an arbitrary function I came up with. All I assume is that it takes different amount of time depending on its argument. For example, it could take really long for some numbers, but really short for some other numbers. – CookieEater Commented Jun 9, 2013 at 8:12
• @Cherniv, Since I don't know how long each calculation exactly takes, using setTimeout is probably not going to work. – CookieEater Commented Jun 9, 2013 at 8:14
• I asked for the code because maybe you can make a check inside the function to know if it has to go on or just return, in case the user pressed the second button – lelloman Commented Jun 9, 2013 at 8:16

1 Answer 1

You can use WebWorkers.

This will work in a separate thread and allow you to do heavy calculations without intefering with the UI thread.

You can signal the worker to stop.

See here for examples on how to use:
http://www.html5rocks./en/tutorials/workers/basics/
https://developer.mozilla/en-US/docs/Web/Guide/Performance/Using_web_workers

If WebWorkers isn't an option you can use a flag to force the function to stop:

var _stop;

function displayNumber(num) {

    _stop = false;

    while(!_stop) {
        //calc
    }

}

And then on button2 click:

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

Instead of a loop you can check _stop after each segment of the calculation is done.

Just note that if the calculation is long and busy you might not get a response of the button until it finishes. You can use setTimout(..., 0) from time to time inside the calculation to allow other events to execute.

How you implement this will depend on the code you use for calculation.

You can break up the calculation for example like this:

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