Question

When I use console.log(elem.queue()); the first time it returns an empty array [] but if I make it more specific aka console.log(elem.queue()[0]); it gives me individual functions in the correct order. After the first time, when I use console.log(elem.queue()); it returns the correct length but it returns the functions in a different order than what they should be and sometimes it returns undefined. But still when I use console.log(elem.queue()[0]); it returns what is expected. Here is my code and what gets outputted:

//The correct queue order is: animate, run, animate

console.log(elem.queue('jChain'));    //1: []
                                      //2+: [run(){}, animate(){}, undefined x 1]

console.log(elem.queue('jChain')[0]); //animate(){} 
console.log(elem.queue('jChain')[1]); //run(){}
console.log(elem.queue('jChain')[2]); //animate(){} 

As you can see, when I specifically select from the queue, it is correct. But when I select the whole queue, everything messes up. Can someone please tell me what is going on and why?

---

UPDATE
Code that creates the queue:

console.log(queue); /* [{args:Array[2], method:"animate"},
                     *  {args:Array[2], method:"run"}, 
                     *  {args:Array[2], method:"animate"}] */
elem.clearQueue('jChain');
$.each(queue, function(key, value){
  if(value.method == 'animate'){
    value.args[1] = {duration:value.args[1], queue:'jChain' /*,complete:function(){elem.dequeue('jChain');}*/ };
    elem[value.method].apply(elem, value.args);
  }else{
    run.apply(elem, value.args);
  }
});

function run(fn, args){
  args = args || [];
  self = this;
  self.queue('jChain', function(next){
    if(fn)
        fn.apply(self, args);
    next();
  });
}

So why it does this weird displaying, I have no idea. I am trying to debug this code still and I figure that this is probably what’s holding me back. I don’t want the 2nd animate to execute until my run function has completed, and it seems like it should work but really it fails.

Here is a jsFiddle of my code. – Make sure you have the console open when testing. If the console is not open, it will look like it works so have it open. Notice how “Subtitle” flicks back on instead of fading in, and also notice the difference in the queue orders.

Answer 1

i’ve taken the liberty to unroll as much as i could to understand what’s going on.

http://jsfiddle.net/kritzikratzi/YYwm9/1/

if i understand correctly you expect the following behaviour:

1. fade out
2. do some console.log thing (or process data)
3. fade in

now you can actually try changing the length of the say-hello-loop, for me with i < 5000 iterations i can see half the animation, with i < 1 i can see the entire animation and with i < 10000 the animation vanishes.
looks like jQuery seems to use the time the last frame was drawn when creating a new animation. javascript is single-threaded, you’re completely blocking the browser with your for-loop and then immediately begin the next animation, which messes up all timing — the animation ends before it even began.

the solution is surprisingly simple:
DONT call next() immediately, but let jQuery’s animate catch up by simply letting the browser repaint quickly and then begin the animation on the next frame.
long story short:

  // instead of this ... 
  next(); 
  // do this...
  window.setTimeout( next, 1 ); 

test it here: http://jsfiddle.net/kritzikratzi/YYwm9/2/

well, i hope this is what you were asking for, it’s a little unclear what your actual problem is 🙂

---

to your original question: why does console.log( queue ) not display correctly?

well, if you look at the jQuery source code for queue() you can see the following:

queue = jQuery._data( elem, type );
[...]
return queue; 

so queue might be some odd jQuery object and not directly an array, don’t expect it to print correctly. as pointed out in an another answer, using toString() fixes it.