CODEWITHSUNDEEP
javascriptjqueryhtml
Mkl Rjv
Mkl Rjv

Reputation: 6933

JQuery not executing within a For loop

Im a JQuery noob trying to write a simple jQuery code to get a text to blink three times. My initial code was as follows:

$("#welcome").click(function () {
            var i = 1;
            while (++i < 10) {
                    $("#welcome").fadeOut("slow", function () { $("#welcome").fadeIn("slow"); })();
            }
        });

But since I probably meddled in forces I could not comprehend, the above code made the text blink only once. I read up on closures and got convinced that the below code could make a change. Unfortunately, it doesnt.

$("#welcome").click(function () {
        var i = 1;
        while (++i < 10) {
            (function (i) {
                $("#welcome").fadeOut("slow", function () { $("#welcome").fadeIn("slow"); })();
            })(i);
        }
    });

Can anyone tell me whats going on here?

Upvotes: 0

Views: 80

Answers (5)

Alex
Alex

Reputation: 457

You can not use jQuery delay function inside a looping/iteration hence you have to user closures:

$(document).ready(function(){
$(".click1").click(function () {
    for (i=0;i<=10;i++) {
        setTimeout(function(x) { 
            return function() { 
                $("#wrapper").fadeOut("slow", function () { $("#wrapper").fadeIn("slow"); })();
            }; 
        }(i), 1000*i);
    }
});
});

<div id="wrapper"></div><div class="click1">click</div>

You can later change the count how many times you want to blink the <div>.

Upvotes: 0

floribon
floribon

Reputation: 19193

Fading in and out takes some time, and you have to wait for your animation to be over before you can run the next one.

The provided answers solve your problem since jQuery is clever enough to bufferize your animation queue, but it may creates even more confusion for begginers, and also if you want to do something else between the fading animations, you can't rely on it anymore.

You then have to write your code on what is called an asynchronous recursive way (woah). Simply trying to understand that snippet may help you a lot with javascript general programming.

function blink(nbBlinks) {
  // Only blink if the nbBlinks counter is not zero
  if(nbBlinks > 0) {
    $('#welcome').fadeOut('slow', function() {
      // Do stuff after the fade out animation
      $(this).fadeIn('slow', function() {
        // Now we're done with that iteration, blink again
        blink(nbBlinks-1);
      })
    });
  }
}

// Launch our blinking function 10 times
blink(10);

Upvotes: 1

Rituraj ratan
Rituraj ratan

Reputation: 10378

Set in queue 

   $("#welcome").click(function () {
        var i = 1;
   //clear animations whcih are running at that time
    $(this).stop(true, true);
        while (++i < 10) {
            $(this).fadeOut("slow").fadeIn("slow");
        }
    });

Upvotes: 0

CRABOLO
CRABOLO

Reputation: 8793

This works perfectly. Demo http://jsfiddle.net/X5Qy3/

$("#welcome").click(function () {
      for (var x = 0; x < 3; x += 1) {
        $("#welcome").fadeOut("slow");
        $("#welcome").fadeIn("slow");
      }
});

Also, if you know how many times you want to do something. You should use a For Loop. While Loops are for when you don't know how many times you want it to run.

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

You need make use of the animation queue

var $welcome = $("#welcome").click(function () {
    var i = 1;
    //clear previous animations
    $welcome.stop(true, true);
    while (++i < 10) {
        $welcome.fadeOut("slow").fadeIn("slow");
    }
});

Demo: Fiddle

Upvotes: 2

Related Questions