爲什麼在將阻塞函數放入隊列時jQuery的動畫中斷？

Question

當我第一次使用console.log(elem.queue());它返回一個空數組[]，但如果我使它更具體又名console.log(elem.queue()[0]);它給了我正確的順序個別功能。第一次後，當我使用console.log(elem.queue());時，它返回正確的長度，但它返回的函數順序與它們應該的順序不同，有時它返回undefined。但仍然當我使用console.log(elem.queue()[0]);它返回所期望的。這裏是我的代碼和輸出結果：

//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(){} 

正如你所看到的，當我特別從隊列中選擇時，它是正確的。但是，當我選擇整個隊列時，一切都會紊亂起來。 有人可以告訴我發生了什麼，爲什麼？創建隊列

---

UPDATE
代碼：

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(); 
    }); 
} 

那麼它爲什麼這個奇怪的顯示，我不知道。我試圖調試這個代碼，我想這可能是阻止我回來。我不希望第二個動畫執行，直到我的運行功能完成，它似乎應該工作，但它真的失敗。

Here is a jsFiddle of my code. - 確保在測試時打開控制檯。如果控制檯沒有打開，它會看起來像它的工作，所以它打開。注意「副標題」是如何彈回而不是淡入的，並且還注意到排隊順序的差異。

Answer 1

我冒昧地展開了儘可能多的內容，以瞭解發生了什麼事情。

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

如果我理解正確的話出現以下行爲：

1. 淡出
2. 做一些事情的console.log（或處理數據）
3. 淡入

現在你可以嘗試改變say-hello-loop的長度了，對於m e與i < 5000迭代我可以看到一半的動畫，i < 1我可以看到整個動畫和i < 10000動畫消失。 看起來像jQuery似乎使用創建新動畫時繪製最後一幀的時間。 javascript是單線程的，你完全用你的for循環阻止瀏覽器，然後立即開始下一個動畫，這會攪亂所有的時間 - 動畫在它開始之前就結束了。

該解決方案非常簡單： 不要立即調用next（），而是讓jQuery的動畫趕上，只需讓瀏覽器快速重繪，然後在下一幀開始動畫。 長話短說：這裏

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

測試：http://jsfiddle.net/kritzikratzi/YYwm9/2/

很好，我希望這是你問的是什麼，這是一個有點不清楚你的實際問題是什麼:)

---

到你原來的問題：爲什麼console.log（隊列）顯示不正確？

好，如果你看一下隊列jQuery的源代碼（），你可以看到如下內容：

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

所以隊列可能是一些奇怪的jQuery對象，而不是直接的數組，不要指望它正確打印。正如在另一個答案中指出的，使用toString（）修復它。

Answer 2

這似乎是讓代碼隱式轉換數組的產物。如果您改爲在JavaScript數組上使用顯式的toString（）方法，我會發現輸出是正確的，沒有空數組或未定義的條目。在jsFiddle中，將四個console.log行中的第一行更改爲：

console.log（elem.queue（'jChain'）。toString（））;

將數組顯式轉換爲字符串似乎可以正確返回內容。