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.com/en/tutorials/workers/basics/

https://developer.mozilla.org/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();

}