Worn out getting animation to sequence

Question

This is originally from (Pause execution in while loop locks browser (updated with fiddles))

I have been at this all day and I can't figure out how to keep javascript from advancing to the next line and in essence executing all lines at once. I have tried every combination of delay / setTimeout I can think of to no avail.

I just want the elements in the array to flash once then pause, then do it again for another element in the array till all elements have been removed and the array is empty.

But because javascript is executing all lines at once I end up with the appearance of all elements flashing at the same time.

Here is the fiddle:

http://jsfiddle.net/ramjet/xgz52/7/

and the relevant code:

FlashElement: function () {

  while (elementArray.length) {
    alert('a ' + elementArray.length);
    var $el = elementArray.eq(Math.floor(Math.random() * elementArray.length));

    PageLoadAnimation.FlashBlast($el);
    alert('delay complete');

    elementArray = elementArray.not($el);
    alert('array popped');

    alert('z ' + elementArray.length);
  }
},

---

ANSWER FOR THIS SITUATION. Hopefully it will help others.

As Zach Saucier points out the loop was really my problem...but not the only problem. I was the other problem(s).

Me first.

Fool that I am I was really causing my own complications with two things I was doing wrong.

First using jsfiddle my javascript would error due to syntax or some such thing but fiddle doesn't tell you that (to my knowledge) so my fiddle wouldn't run but I took it in pride as MY CODE IS FINE stupid javascript isn't working.

Second I was passing my function to setTimeout incorrectly. I was adding the function parens () and that is not correct either which would bring me back to issue one above.

WRONG: intervalTimer = setInterval(MyFunction(), 1500);

RIGHT: intervalTimer = setInterval(MyFunction, 1500);

As for the code. As Zach pointed out and I read here (http://javascript.info/tutorial/settimeout-setinterval) while he was responding setting a timeout in a loop is bad. The loop will iterate rapidly and with the timeout one of the steps in the loop we get into a circular firing squad.

Here is my implementation:

I created a couple variables but didn't want them polluting the global scope so I created them within the custom domain. One to hold the array of elements the other the handle to the setInterval object.

var PageLoadAnimation =
               {
                   elementArray: null,
                   intervalTimer: null,
                   ....
                }

In my onReady function (the one the page calls to kick things off) I set my domain array variable and set the interval saving the handle for use later. Note that the interval timer is how long I want between images flashes.

onReady: function () 
      {
         elementArray = $('#PartialsContainer').children();

         //black everything out just to be sure
         PageLoadAnimation.BlackOutElements();

         //flash & show
         intervalTimer = setInterval(PageLoadAnimation.FlashElement, 1500);

       },

Now instead of looping through the array I am executing a function at certain intervals and just tracking how many elements are left in the array to be flashed. Once there are zero elements in the array I kill the interval execution.

FlashElement: function () 
{

   if(elementArray.length > 0) //check how many elements left to be flashed
   {
      var $el = PageLoadAnimation.GrabElement(); //get random element
      PageLoadAnimation.FlashBlast($el); //flash it
      PageLoadAnimation.RemoveElement($el); //remove that element
   }
   else
   {
      //done clear timer
      clearInterval(intervalTimer);
      intervalTimer = null;
   }


},

So the whole thing is:

var PageLoadAnimation =
               {
                   elementArray: null,
                   intervalTimer: null,

                   onReady: function () {
                       elementArray = $('#PartialsContainer').children();

                       //black everything out just to be sure
                       PageLoadAnimation.BlackOutElements();

                       //flash & show
                       intervalTimer = setInterval(PageLoadAnimation.FlashElement, 1500);
                       //NOT this PageLoadAnimation.FlashElement()

                   },

                   BlackOutElements: function () {
                       $('#PartialsContainer').children().hide();
                   },

                   FlashElement: function () 
                   {

                       if(elementArray.length > 0)
                       {
                           var $el = PageLoadAnimation.GrabElement();
                           PageLoadAnimation.FlashBlast($el);
                           PageLoadAnimation.RemoveElement($el);
                       }
                       else
                       {
                           //done clear timer
                           clearInterval(intervalTimer);
                           intervalTimer = null;
                       }


                   },

                   GrabElement: function()
                   {
                       return elementArray.eq(Math.floor(Math.random() * elementArray.length));
                   },

                   RemoveElement: function($el)
                   { elementArray = elementArray.not($el); },

                   FlashBlast: function ($el) {
                       //flash background
                      $el.fadeIn(100, function () { $el.fadeOut(100) });
                   }



               }

Hope that help others understand the way to go about pausing execution in javascript.

Answer 1

The reason why you were having trouble is because setTimeout function is non-blocking and will return immediately. Therefore the loop will iterate very quickly, initiating each of the timeouts within milliseconds of each other instead of including the previous one's delay

As a result, you need to create a custom function that will wait on the setInterval to finish before running again

FlashElement: function () { // Call it where you had the function originally
    myLoop();
},
...

function myLoop() {
   setTimeout(function () {    //  call a setTimeout when the loop is called
      var $el = elementArray.eq(Math.floor(Math.random() * elementArray.length));
      PageLoadAnimation.FlashBlast($el);
      elementArray = elementArray.not($el); 
      if (0 < elementArray.length) {  //  if the counter < length, call the loop function
         myLoop();
      }
   }, 1000)
}

Feel free to change the delay to whatever value you wish (3000ms to let each fade finish before the last at the moment). If you want to start the fade in of the next before the previous ends and keep them in their original positions you would have to animate the opacity using .css instead of using fadeIn and fadeOut

My answer is based on this answer from another SO question