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

ご覧のとおり、キューから具体的に選択すると、それは正しいです。しかし、キュー全体を選択すると、すべてが台無しになります。誰かが何が起こっているのか、そしてその理由を教えてもらえますか?

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

では、なぜこの奇妙な表示が行われるのか、私にはわかりません。私はまだこのコードをデバッグしようとしていますが、これがおそらく私を妨げているものだと思います。run 関数が完了するまで 2 番目のアニメーションを実行したくありません。動作するはずですが、実際には失敗します。

これが私のコードの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;

そのため、 queue は奇妙な jQuery オブジェクトであり、直接配列ではない可能性があります。正しく印刷されるとは思わないでください。別の回答で指摘されているように、 toString() を使用すると修正されます。

于 2012-09-12T21:01:35.293 に答える
1

これは、コードが暗黙的に配列を変換できるようにした結果のようです。代わりに、JavaScript 配列で明示的な toString() メソッドを使用すると、出力が正しく、空の配列や未定義のエントリがないことがわかります。jsFiddle で、4 つの console.log 行の最初の行を次のように変更します。

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

配列を文字列に明示的に変換すると、コンテンツが正しく返されるようです。

于 2012-09-10T10:37:20.180 に答える