Javascript setTimeout function

Question

I am calling this function

function drawLayers() {

    //setTimeout(drawBlueSky,500);
    //setTimeout(drawCircle1,1250);
    setTimeout(drawMoon,800);
             


        

Answer 1

You could make a central var isStopped = false; variable which you set to true when stopping. Then make every function check for the variable before executing.

Answer 2

you could create an array that contains all the timeour so you have a reference to remove all of them

have a look at the below:

http://greengeckodesign.com/blog/2007/10/how-to-clear-all-timeouts-in-javascript.html

Answer 3

Set your stop button to set a flag (ex. stopPressed = true;). I would write a function drawNextLayer(previousLayer).

Then write

while (stopPressed === false && previousLayer !== lastLayer) {
    drawNextLayer(previousLayer);
    previousLayer++;
}

Answer 4

The common way to do this is using clearTimeout:

var myTimeout = setTimeout(function(){
    alert('hi');
}, 500);
clearTimeout(myTimeout); // No 'hi' alert for you, sir

But in your case, I would propose a more concise way of controlling all the timeouts:

var keepRunning = true;

var timeouts = {
    drawMoon: 800,
    drawCircle1: 2300,
    drawCircle2: 2700,
    drawCircle3: 3100,
    drawCircle4: 3500
    // etc...
};

for(var func in timeouts)
    var timeout = setTimeout(func, timeouts[func]);

// just demonstrating a timeout run function here, such as "drawMoon":
var drawMoon = function(){
    ...
    if(!keepRunning)
        return;
    ...
    // probably conditionally
    keepRunning = false;
    ...
};

Answer 5

Have such code:

var timers = [];
function drawLayers() {

    //setTimeout(drawBlueSky,500);
    //setTimeout(drawCircle1,1250);

    timers = [];
    timers.push(setTimeout(drawMoon,800));
    timers.push(setTimeout(drawCircle1,2300));
    timers.push(setTimeout(drawCircle2,2700));
    timers.push(setTimeout(drawCircle3,3100));
    timers.push(setTimeout(drawCircle4,3500));
    timers.push(setTimeout(drawCircle5,3900));
    timers.push(setTimeout(drawtext2,4300));
    timers.push(setTimeout(drawtext,4700));
    timers.push(setTimeout(drawtext3,5100));
    timers.push(setTimeout(drawtext4,5500));
    timers.push(setTimeout(drawtext5,5900));
    timers.push(setTimeout(drawtext6,6300));
    timers.push(setTimeout(drawtext7,6700));
    timers.push(setTimeout(drawtext8,7100));
    timers.push(setTimeout(drawtext9,7500));
    timers.push(setTimeout(drawtext10,7900));

}

function StopAll() {
    for (var i = 0; i < timers.length; i++)
         window.clearTimeout(timers[i]);
}

Answer 6

You can define a var corresponding to your setTimeout and then clear it if you want to cancel the timeout.
For instance:

// set a timeout
timer = setTimeout("testtimeout()",3000);   

// clear the timeout
clearTimeout(timer);

You can wrap all your timeouts within an array and loop over the array to cancel every timeout

[EDIT] seems like Exelian's answer is quite cleaner and more adapted to your code