Javascript setTimeout function

Question

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(drawtext4,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.

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?

user447356 · Accepted Answer · 2011-08-25 14:10:29Z

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

Exelian · Accepted Answer · 2011-08-25 14:07:07Z

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.

answered Aug 25, 2011 at 14:07

Exelian

5,9381 gold badge33 silver badges51 bronze badges

1 Comment

Massimiliano Peluso Over a year ago

in this case you will remove the timeout and it will continue running

JMax · Accepted Answer · 2011-08-25 14:08:56Z

1

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

answered Aug 25, 2011 at 14:08

JMax

26.7k12 gold badges74 silver badges89 bronze badges

Comments

Massimiliano Peluso · Accepted Answer · 2011-08-25 14:10:46Z

1

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

answered Aug 25, 2011 at 14:10

Massimiliano Peluso

26.8k6 gold badges65 silver badges75 bronze badges

Comments

Simeon · Accepted Answer · 2011-08-25 14:18:22Z

1

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

edited Aug 25, 2011 at 14:18

answered Aug 25, 2011 at 14:09

Simeon

5,5793 gold badges31 silver badges52 bronze badges

Comments

Miriam · Accepted Answer · 2011-08-25 14:14:40Z

0

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

answered Aug 25, 2011 at 14:14

Miriam

9691 gold badge6 silver badges15 bronze badges

Collectives™ on Stack Overflow

Javascript setTimeout function

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related