Javascript setTimeout function

I am calling this function

function drawLayers() {

    //setTimeout(drawBlueSky,500);
    //setTimeout(drawCircle1,1250);
    setTimeout(drawMoon,800);
    setTimeout(drawCircle1,2300);
    setTimeout(drawCircle2,2700);
    setTimeout(drawCircle3,3100);
    setTimeout(drawCircle4,3500);
    setTimeout(drawCircle5,3900);
    setTimeout(drawtext2,4300);
    setTimeout(drawtext,4700);
    setTimeout(drawtext3,5100);
    setTimeout(draw开发者_开发问答text4,5500);
    setTimeout(drawtext5,5900);
    setTimeout(drawtext6,6300);
    setTimeout(drawtext7,6700);
    setTimeout(drawtext8,7100);
    setTimeout(drawtext9,7500);
    setTimeout(drawtext10,7900);

}

which calls many other functions fox ex drawMoon,drawCircle1 etc I am calling drawLayers() function on click of play button. What I need is if someone clicks on stop button the setTimeout function should stop calling all other functions or stop wherever it is. For ex if drawMoon function is called and someone clicks on stop all other functions drawCircle1,drawCircle2 shouldnt be called.

1. pause button also there would be third button which when clicked will pause the setTimeout function as above. when i click on same button again it should call function from where it has stopped.

Is this possible?

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

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.

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

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

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;
    ...
};

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++;
}