Looping with delay jquery / js

Question

I have traffic light - 3 colors:

<div class="green" id="ready"></div>
<div class="orange" id="steady"></div>
<div class="red" id="go"></div>

and array:

var status = ["ready", "steady", "go"];

I want add and remove class (to imitate flashing) from each in infinity loop with some delay, but this code make it all in one time. How can i solve it?

jQuery.each(status, function() {
    setTimeout(function() {
        $("#" + this).addClass('active');
    }, 3000);
});

Work with a queue: http://stackoverflow.com/questions/2510115/jquery-can-i-call-delay-between-addclass-and-such — Jonny Sooter, Mar 13 '13 at 16:07

Popnoodles · Answer 1 · 2015-08-05T11:12:55.763

15

http://jsfiddle.net/9feh7/

You're setting all to run at once. Multiply by the index each time.

$('#ready, #steady, #go').each(function(i) { 
    var el=$(this);
    setTimeout(function() { 
        el.addClass('active');
    }, i * 3000); 
});

Note that i in the first instace is 0, so if you want #ready to wait 3 seconds use (i+1) * 3000

Also, $('#'+this) is not correct syntax, it's $(this), however that won't work inside the setTimeout.

Use setInterval instead of setTimeout to run an infinate (unless cleared) loop.

edited Aug 05 '15 at 11:12

answered Mar 13 '13 at 16:06

Popnoodles

28,090
2
45
53

Oh, thanks a lot - its working now, but with $('#'+status[i]).addClass('active'); Now, how can I run it in infinity loop? – Vojtech Lacina Mar 13 '13 at 16:24
use setInterval instead of setTimeout : https://developer.mozilla.org/en-US/docs/DOM/window.setInterval – j_mcnally Mar 13 '13 at 16:44
@VojtechLacina, j_mcnally's response is to you. – Popnoodles Mar 13 '13 at 17:55

Rohan Kumar · Answer 2 · 2015-08-06T05:01:42.653

3

Try this:

var status = ["ready", "steady", "go"];
var i=1;
jQuery(status).each(function(index,value) {
    var self=this;
    setTimeout(function() {
       $(self).addClass('active');
    }, 3000*i);
    i++;
});

Fiddle: http://jsfiddle.net/M9NVy/

edited Aug 06 '15 at 05:01

answered Mar 13 '13 at 16:10

Rohan Kumar

40,431
11
76
106

Why add another var `i` when you're already creating `index`? – Popnoodles Aug 05 '15 at 11:11
As index will start from 0 which will add class active without any delay. We can use `index+1` instead. – Rohan Kumar Aug 06 '15 at 05:00

score 0 · Answer 3 · answered Mar 13 '13 at 16:49

I would say you are better off chaining for your end goal.

1) Setup a function for red. at the end of the red function schedule yellow with a set timeout 1000 ms. 2) At the end of yellow schedule 1000ms time out for red

3) At the end of green schedule 1000ms timeout for green.

4) start your code by calling red()

Now it will loop infinitely with out the awkwardness of multiplying your timeout.

If you hate that then I would use setInterval rather than setTimeOut but you may need more math.

Looping with delay jquery / js

3 Answers3