1

アニメーションが特定の回数実行され、アニメーションの各反復の前に関数が実行されるループを設定しようとしています。ただし、タイミングはずれてしまいます。コールバックを n 回実行してから、アニメーションを n 回実行します。例えば：

for (var i=0;i<3;i++) {
  console.log(i);
  $('#blerg').animate({top:'+=50px'},75,'linear', function(){log('animated')});
}

出力

0
1
2
animated
animated
animated

jquery に切り替える前に scriptaculous でこの問題に遭遇し、「beforeSetup」アニメーション コールバックを発見しました。jqueryに相当するものはありますか?

4

3 に答える 3

2

アニメーションは非同期です。したがって、ループは非常に迅速に実行され、3 つのアニメーションから始まり、1、2、および 3 が出力されます。しばらくすると、アニメーションが完了し、アニメーション x 3 が出力されます。これで出力が説明されます。

いくつかの再帰はどうですか？

do_animation(max_runs, total_runs) {
   log();
   if (total_runs < max_runs) {
       $(foo).animate(..., do_animation(max_runs, ++total_runs));
    }
}

do_animation(3,0);

それを試してみて、それがどのように機能するか教えてください。

于 2008-11-02T08:00:21.597 に答える
2

キュー機能を利用することもできます。

http://docs.jquery.com/Effects/queue#callback

内部的には、animate が同じ実行キューを使用していることを思い出すので、これは理論上は機能するはずです (未テスト)。

/* Safe Namespace + Onload : I do this everywhere */
jQuery(function($){ 
 /* Calling this once instead of many times will save 
    a lot of wasted calls to document.getElementById + processing garbage 
  */
 var blerg = $('#blerg');
 var addStep = function( i )
 {
     blerg.queue(function(){ 
        console.log(i);
        $(this).dequeue();
     }); 
     blerg.animate({top:'+=50px'},75,'linear'); 
     /* In theory, this works like the callback does */
     blerg.queue(function(){
       log('animated');
       $(this).dequeue();
     });
 };

 for (var i=0;i<3;i++) 
 {
  /* I call a function here, because that way you don't need to worry 
     about the fact 'i' will reference the last value of 'i' when the code 
     gets around to executing. */
    addStep(i); 
 }
});

ケントさん、コールバックを明示的にキューに入れる必要がある理由がよくわかりません。あなたが間違っているわけではありません -- コールバックが animate() の引数である場合は機能しません -- しかし、私はただ興味があります。

2 番目のケースでは必要ありませんが、コールバック フェーズ (たとえば、別のアニメーション) でより多くのことを実行しようとする場合、より一貫性のある、ややきれいなコードになると思いました。

次に、2 番目の blerg.queue の後に次の animate 呼び出しを配置し​​ます。

言うまでもなく、実行が必要になる前に実行シーケンス全体が定義されているため、実行が大幅に線形になるという点で、プログラムによる細かい点を作成するという追加の利点があります。

したがって、これにより、コードは「あなたが思うように機能する」ようになり、「機能するために必要な方法」で実行され、すべての非同期性について心配する必要がなくなります。(これにより、バグが少なく、保守しやすいコードになります)

于 2008-11-02T09:07:48.933 に答える
0

これらのソリューションはどちらも魅力的に機能しました。ありがとう、MDCore と Kent!

ケントさん、コールバックを明示的にキューに入れる必要がある理由がよくわかりません。あなたが間違っているわけではありません -- コールバックが animate() の引数である場合は機能しません -- しかし、私はただ興味があります。

于 2008-11-02T09:42:43.310 に答える