Function call in a loop in javascript

Question

I am trying to call a function from a loop in such a way that when the function finishes executing, the loop will continue the next iteration and call it again. But instead, the loop does not wait for the function to complete and instead calls 4 instances of the function and starts them at the same time! Should I put the whole function in a loop or is there to make the loop wait for the function to execute? Thanks

for (var i=2; i<=4; i++){ galleryAnimation(i); //This is executed 3 times at once } function galleryAnimation(i){ $("#pic" + i).delay(delayTime).fadeIn(duration); } 

Answer 1

Simplified solution: increase the waiting time each time.

 var i, factor, duration = 250, delayTime = 500; for (i = 2, factor = 0; i <= 4; i++, factor++) { galleryAnimation(i, factor); } function galleryAnimation(i, factor) { $("#pic" + i).delay(factor * delayTime).fadeIn(duration); } 

This works the same way your approach does, only the delays get longer every time.

General solution 1 - work with setInterval() so that your working function (the one that executes fadeIn ) is called at predefined intervals:

 var elements = $("#pic2,#pic3,#pic4").toArray(), // or any other way to select your elements duration = 250, delayTime = 500, intervalId = setInterval(function () { $(elements.shift()).fadeIn(duration); if (elements.length === 0) { clearInterval(intervalId); } }, delayTime); 

General solution 2 - work with callbacks that are called upon completion of the previous animation:

 var elements = $("#pic2,#pic3,#pic4").toArray(), // or any other way to select your elements duration = 250, delayTime = 500, next = function () { $(elements.shift()).delay(delayTime).fadeIn(duration, next); }; next(); // start the chain 

Answer 2

The function is executed 3 times, as you requested, the problem is that both delays and fadeIn use timers: they set a timer in the future when the function will be executed and immediately return: blocking calls . So, in your case, because you call the function 3 times, say 0.0001s, 0.0002s and 0.0003s, three kicks, say, 5.0001, 5.0002 and 5.0003.

What you meant is call blocking for these features. You expected all execution to stop until the animation was finished. This would stop the entire JavaScript Javascript engine all the time, i.e. there would be no other interaction with the animation or javascript user.

To solve this problem you should use callbacks . You can provide a fadeIn function that will be called after the animation finishes:

http://api.jquery.com/fadeIn/

You can use queues to simulate the same when delayed ():

Callback .delay ()

Answer 3

one thing you can do is use an identifier (boolean) and then, in a loop, you check the identifier to decide if the loop can continue or stop. For example, function galleryAnimation(i, iBool){ $("#pic" + i).delay(delayTime).fadeIn(duration);
iBool = 0; } function galleryAnimation(i, iBool){ $("#pic" + i).delay(delayTime).fadeIn(duration);
iBool = 0; }

Then on the return;

 for (var i=2; i<=4; i++){ galleryAnimation(i, iBool); // If iBool = 0 then continue // Else Break } 

this may be a solution, since the loop will need a return value to determine the next step, to continue or interrupt.

Answer 4

I came up with my own solution that seemed to work fine, this is my code:

 function fadeInAnimation(index){ $("#pic" + index).delay(delayTime).fadeIn(duration, function(){ photoIndex(); }); } function photoIndex(){ index++; fadeInAnimation(index); } fadeInAnimation(index); }); 

I realized that using loops is a very bad idea with such things. This code will allow me to add as many images as I want by simply renaming them to a folder, rather than manually encoding them as callbacks for each photo. Thanks for those who answered. Your suggestions are great and will surely be remembered in other applications like this