0

setTimeout() を使用してクラスを一連のスパンに追加し、クラスをカスケード方式で追加して、すべてを一度に設定するのではなく、視覚的な進行を作成したいと考えています。私は非常に多くの異なる方法を試しました。

ここにコードペンがあります... http://codepen.io/geirman/pen/nDhpd

コードペンは、私がここで見つけた実際の例を模倣しようとしています... https://developers.google.com/maps/documentation/javascript/examples/marker-animations-iteration

問題は、addClass を連続して遅延させることができないため、一度にすべてが発生することです。これが現在のコードです。

 /* The Problem Code
 ********************/

 var span$ = $("span");
 var index = 0;
 var factor = 500;

 function colorSpans(){
   for(var i = 0; i < span$.length; i++){
     setTimeout(function(){
       animate();
     }, factor*index);
   }
   index = 0; 
 }

 function animate(){  
   span$[index++].className = "lg"; 
 }

 colorSpans();

もう1つ、これをjQueryなしでやりたいと思っていますが、jQueryソリューションも受け入れます。

4

1 に答える 1

0

現在のコードでは、 への最初の呼び出しanimateがすぐに実行され、indexその後1. しかし、ループは 2 番目のタイムアウト ハンドラが呼び出される前に実行を終了する可能性があります (つまり、ループの実行に 500 ミリ秒かかりません)。したがって、これは、 の値indexが更新されないため、残りのスパンが即座に表示されることを意味します。

このようなものが動作するはずです：

function colorSpans() {
    for(var i = 0; i < span$.length; i++) {
       (function(i) {
           setTimeout(function() {
               animate(i);
           }, factor * i);
       })(i); //force a new scope so that the "i" passed to animate()
              //is the value of "i" at that current iteration and not
              //the value of "i" when the loop is done executing.
    }
}

function animate(i) {
    span$[i].className = "lg";
}

colorSpansとの間の状態を維持するためにグローバル変数を使用していないanimate(つまり、 を使用していない)ため、上記のコードも好ましいですindex。

setIntervalただし、代わりに次を使用して、さらに改善することができます。

var i = 0;
var intervalId = setInterval(function() {
    if(i < span$.length) {
        animate(i);
        i++;
    } else {
        clearInterval(intervalId);
    }
}, 500)

setTimeoutこれはアプローチよりもきれいだと思います。

更新されたコードペンをチェックしてください:

于 2013-09-05T00:00:02.927 に答える