Javascript setTimeout + loop

Question

I try to loop some div's, and I have that code:

var first = ".first";
for (i = 0; i < 9999; i++) {
    setTimeout(function () {
        $(first).delay(500).animate({
            "opacity": "1"
        }, 1500);
        $(first).delay(1500).animate({
            "opacity": "0"
        }, 1500);
        $(".1").delay(4500).animate({
            "opacity": "1"
        }, 1500);
        $(".1").delay(1500).animate({
            "opacity": "0"
        }, 1500);

        $(".2").delay(4800).animate({
            "opacity": "1"
        }, 1500);
        $(".2").delay(1500).animate({
            "opacity": "0"
        }, 1500);

        $(".3").delay(5300).animate({
            "opacity": "1"
        }, 1500);
        $(".3").delay(1500).animate({
            "opacity": "0"
        }, 1500);

        $(".4").delay(5600).animate({
            "opacity": "1"
        }, 1500);
        $(".4").delay(1500).animate({
            "opacity": "0"
        }, 1500);

        $(".5").delay(5900).animate({
            "opacity": "1"
        }, 1500);
        $(".5").delay(1500).animate({
            "opacity": "0"
        }, 1500);
    }, 6000);
}

I tried without setTimeout and effect was the same - divs was appeared and disappeared only in 1st loop. In each next loop they're appeared in random order. I know, that method is wrong, but I'm green with JavaScript and I have no idea how to do it correct. Someone can help me?

animate works asynchronously, thus they all start working at the same moment for you. There's a third argument you can pass to animate, is callback, an anonymous function that does something when animation completed, try to make something with that — deb0rian
– deb0rian, Commented Nov 20, 2013 at 18:34
possible duplicate of Passing functions to setTimeout in a loop: always the last value? and a gazillion others — Matt Ball
– Matt Ball, Commented Nov 20, 2013 at 18:34
@MattBall I disagree, the OP does not use any variables in setTimeout's callback function (except first which does not change anyway). — ComFreek
– ComFreek, Commented Nov 20, 2013 at 18:36

epascarello · Accepted Answer · 2013-11-20 18:39:15Z

1

It is because the for loop keep attaching events and you are 9999 animations to the same element with no delay. They are just pounding on each other. The code makes no sense.

If you want the code to run in a loop, you can use a callback in one of the animations and call a function when it is done. Other option is to use a Interval, but that gets messy with timing events not being accurate and they can pile up.

answered Nov 20, 2013 at 18:39

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JJJ · Accepted Answer · 2013-11-20 18:42:58Z

0

It seems like you're trying to make the elements animate seemingly indefinitely by running a setTimeout timer a large number of times. For that you should instead use setInterval() to have the function run every 6 seconds.

So, instead of...

for (i = 0; i < 9999; i++) {
    setTimeout(function () {
        $(first).delay(500).animate({
            "opacity": "1"
        }, 1500);

        // etc etc

    }, 6000);
}

...do this:

setInterval(function () {
    $(first).delay(500).animate({
        "opacity": "1"
    }, 1500);

    // etc etc

}, 6000);

(note: no for loop.)

Demo: http://jsfiddle.net/57sYA/

answered Nov 20, 2013 at 18:42

JJJ

33.2k20 gold badges95 silver badges103 bronze badges

3 Comments

Blue Skies Over a year ago

setInterval should not be used for this purpose. It assumes that the async code that jQuery runs internally will remain perfectly in sync with your setInterval, which is highly unlikely.

JJJ Over a year ago

@BlueSkies I don't see why they should stay in sync in this case.

JJJ Over a year ago

@BlueSkies Ok, the delay() + animation duration is longer than the interval length for most of the elements, which probably messes up the intended effect.

Wojciech Parys · Accepted Answer · 2013-11-21 19:30:59Z

I have found solution of my problem - setInterval

    var licznik=0;
function show_anim(){
         if(licznik!=9999){
         $("#first").delay(500).animate({"opacity": "1"}, 1500);
         $("#first").delay(1500).animate({"opacity": "0"}, 1500);
         $("#1").delay(4500).animate({"opacity": "1"}, 1500);
         $("#1").delay(1500).animate({"opacity": "0"}, 1500);

         $("#2").delay(4800).animate({"opacity": "1"}, 1500);
         $("#2").delay(1500).animate({"opacity": "0"}, 1500);

         $("#3").delay(5300).animate({"opacity": "1"}, 1500);
         $("#3").delay(1500).animate({"opacity": "0"}, 1500);

         $("#4").delay(5600).animate({"opacity": "1"}, 1500);
         $("#4").delay(1500).animate({"opacity": "0"}, 1500);

         $("#5").delay(5900).animate({"opacity": "1"}, 1500);
         $("#5").delay(1500).animate({"opacity": "0"}, 1500);
         licznik++;
         console.log(licznik);
         }
   }

$(document).ready(function(){

show_anim()


setInterval("show_anim()",12000);
});

Demo: http://jsfiddle.net/D5bxA/

Collectives™ on Stack Overflow

Javascript setTimeout + loop

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related