jquery javascript stop an undefined object from being evaluated in nested array iteration

Question

I have an array of arrays and some of the inner arrays have yet another nested array. Some don't. I loop through the top level array elements and IF there is an internal array I loop through them. If there isn't one, I don't. Or so I think.

for some reason when my iteration finds an array without a nested array my console shows "type error" undefined... which is technically right as there is no nested array defined. However I thought my nested if statement wouldn't allow this to be evaulated. Any thoughts?

for example animation[0][3] is an array but animations[1][3] is undefined. so in my if loop i have a nested

var a = animations.shift();

if ( a[3] )
{
  console.log( 'a[3] is: ' + a[3] )
}
else
{
  return;
}

I read that as, if a[3] exists log it to console, if not escape without printing to console... yet my console continues to produce an undefined evaluation. Is that because simply testing for it's existence returns an undefined error? How do I stop this error from popping up every time i run into an array that does not have a nested array?

Thanks.

var animations = [
    ['.pcba','fadeIn', [1000], [
        ['.pcb_cad', 'fadeIn', [1000] ]
        ]
     ],
    ['.pcba', 'delay', [2000] ],
    ['.pcba','fadeOut', [1000], [
        ['.heatGenComps', 'fadeIn', [1000] ],
        ['.arrows', 'fadeIn', [1000] ]
        ]
    ],
    ['.heatGenComps', 'delay', [2000] ],
    ['.heatGenComps', 'fadeOut', [1000], [
        ['.arrows', 'fadeOut', [1000] ],
        ['.pcb_cad_cfd', 'fadeIn', [1000] ],
        ['.wePredOpTemps', 'fadeIn', [1000] ]
        ]
    ],

 ]; 

and I iterate through them like:

iter();
function iter(){

if (!animating) return;

 var a = animations.shift();

if (a) {
     var el = a[0];
     var fn = a[1];
     var args = a[2];

     $.fn[ a[1] ].apply( $( a[0] ), a[2] ).promise().done(iter);
     if ( a[3] )
     {
        var secondary = a[3];
        console.log( 'a[3] is: ' + a[3] );
        secondaryAnime();
        function secondaryAnime(){
            b = secondary.shift();
            console.log('secondary is: ' + b );
            $.fn[ b[1] ].apply( $( b[0] ), b[2] );
            secondaryAnime();
         };

     }
     else
     {
        return;
     }


}
else
{

}

};

Answer 1

You have in fact a lot of code for a simple animation chain. All you want to do is to have some animations at the same time in each step.

Did you hear of the plugin jquery-timing? It allows concatenation of any asynchronous stuff with almost no code. I'll give to the whole code that does exactly your animation chain, with the same timings, written in jquery-timing style:

$('.pcb_cad').fadeIn(1000)
    .$('.pcba').fadeIn(1000,$).wait(2000).fadeOut(1000)
    .$('.heatGenComps, .arrows').fadeIn(1000,$).wait(2000).fadeOut(1000)
    .$('.pcb_cad_cfd, .wePredOpTemps').fadeIn(1000);

As you see it is just a single long jQuery chain.

Here only two of the timing methods from that plugin are necessary. First you write .fadeIn(…,$) whenever you want to wait with the following jQuery commands in the method chain to wait for finishing the fade animation. The method .wait(timeout) will continue all the following methods in the method chain after the given timeout.

And the plugin has a lot more intuitive ways to postpone and concatenate your actions.

Answer 2

the cause of the exception is how you iterate your nested array b. You have no end condition when you stop fetching secondary.shift();

With a test "if (b) { … }" after assigning secondary.shift() you'd be fine.

BTW: you don't need to write all the empty "else" blocks.