jquery - 当我将阻塞函数放入队列时，为什么 jQuery 的动画会中断？

Question

当我第一次使用 console.log(elem.queue()); 时，它返回一个空数组 [] 但如果我让它更具体，又名 console.log(elem.queue()[0]); 它以正确的顺序为我提供了各个函数。第一次之后，当我使用 console.log(elem.queue()); 它返回正确的长度，但它以与应有的顺序不同的顺序返回函数，有时它返回未定义。但当我使用 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(){} 

正如你所看到的，当我专门从队列中选择时，它是正确的。但是当我选择整个队列时，一切都变得困惑了。 有人可以告诉我发生了什么事以及为什么吗？

<小时/> 更新
创建队列的代码:

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 的长度，对我来说是 i < 5000迭代我可以看到一半的动画，i < 1我可以看到整个动画和 i < 10000动画消失。看起来 jQuery 似乎在创建新动画时使用了最后一帧的绘制时间。 javascript 是单线程的，你用 for 循环完全阻塞了浏览器，然后立即开始下一个动画，这会搞乱所有的时间——动画在开始之前就结束了。

解决方案非常简单:不要立即调用 next()，而是让 jQuery 的动画 catch ，只需让浏览器快速重绘，然后在下一帧开始动画。长话短说:

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

在这里测试一下:http://jsfiddle.net/kritzikratzi/YYwm9/2/

好吧，我希望这就是您所要求的，有点不清楚您的实际问题是什么:)

<小时/>

你原来的问题:为什么console.log(queue)显示不正确？

好吧，如果您查看queue() 的 jQuery 源代码，您可以看到以下内容:

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

所以队列可能是一些奇怪的 jQuery 对象而不是直接的数组，不要指望它能正确打印。正如另一个答案中指出的，使用 toString() 修复它。