javascript - 毎回ループする Javascript 関数呼び出し

Question

私は呼び出された関数を持っていますrotator(id)：この関数はアニメーション化divされ、この関数はさまざまidな要素をアニメーション化するために異なる方法で呼び出すことができます

実際に私は 5 種類の ID を使用しています。1,2,3,4,5

そして呼び出しのために私は置く必要があります:

rotador(1);rotador(2);rotador(3);rotador(4);rotador(5);

問題は、自動モードで回転させたいことです。このために、これを使用すると思います

for (i=0;i<=5;i++) { 
   setTimeout(rotador(i),2000);
}

しかし、それはすべて同時にアニメーション化するため、機能しません。最初に最初を実行し、最初の前に続行させてから、2番目に移動するなど、最後に移動するか、5番目の開始を1回で開始します

あなたが私を助けることができるなら、私の問題はこれです ありがとう!!! :)よろしく

Answer 1

実際に Rodator(i) 関数を呼び出して、rodator の結果の 2 秒後に実行をスケジュールします。つまり、コードは次と同等になります。

for (i=0;i<=5;i++) { 
   var result = rotador(i);
   setTimeout(result,2000);
}

これは、コールバック用の関数を作成することで実現できます。

for (i=0;i<=5;i++) { 
   setTimeout((function(i){
      return function(){
        rotador(i);
      }
    })(i),2000 * i);
}

または、rotador 関数自体で次の Rodator を呼び出すことができます。

var rotador = function(i){
    // your code
    if (i < 5) {
       setTimeout(function(){rotaror(i + 1);}, 2000);
    }
}

注: 2 番目の例のクロージャーは、正しい値の関数を呼び出すために必要ですi。匿名関数を作成iし、外部スコープの変更によって値が変更されないローカル スコープ変数として作成します。(これがより読みやすい場合は、ローカル スコープで名前iを変更できます)。nそれ以外の場合、実際の関数呼び出しの前にiの値が変更されるため、 rotador が呼び出されるたびに の値は 5 になります。i

Answer 2

setTimeout() は続行する前に関数が実行されるのを待たないため、遅延をアイテムごとに異なる値に設定する必要があります2000 * (i + 1)。2000

編集:はい、Darhazer が示唆するようにコールバックが必要です

Answer 3

rotationStep(1);

function rotador(id)
{
    console.log(id);
}

function rotationStep( currentId )
{
    rotador(currentId);
    var nextId = currentId<5 ? currentId+1 : 1;
    setTimeout(function(){ rotationStep(nextId) },2000); //anonymous function is a way to pass parameter in IE
}

Answer 4

コールバックを使用します。

setTimeout(function() {
    rotador(i)
}, 2000)