CODEWITHSUNDEEP
javascriptjquery
Wojciech Parys
Wojciech Parys

Reputation: 350

Javascript setTimeout + loop

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?

Upvotes: 0

Views: 494

Answers (3)

Wojciech Parys
Wojciech Parys

Reputation: 350

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/

Upvotes: 0

JJJ
JJJ

Reputation: 33163

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/

Upvotes: 0

epascarello
epascarello

Reputation: 207511

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.

Upvotes: 1

Related Questions