1

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

那么为什么它会出现这种奇怪的显示，我不知道。我仍在尝试调试此代码，我认为这可能是阻碍我的原因。在我的运行功能完成之前，我不希望执行第二个动画，它看起来应该可以工作，但实际上它失败了。

这是我的代码的 jsFiddle。- 确保在测试时打开控制台。如果控制台未打开，它看起来可以正常工作，因此请打开它。请注意“字幕”如何重新打开而不是淡入，并注意队列顺序的差异。

4

2 回答 2

2

我冒昧地尽可能多地展开以了解发生了什么。

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 的动画赶上，只需让浏览器快速重绘，然后在下一帧开始动画。长话短说：

  // 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() 可以修复它。

于 2012-09-12T21:01:35.293 回答
1

这似乎是让代码隐式转换数组的产物。如果您改为在 JavaScript 数组上使用显式 toString() 方法，我发现输出是正确的，没有空数组或未定义的条目。在 jsFiddle 中，将四个 console.log 行中的第一行更改为：

console.log(elem.queue('jChain').toString());

将数组显式转换为字符串似乎可以正确返回内容。

于 2012-09-10T10:37:20.180 回答