forループ内のsetTimeOut

Question

forループ内でsetTimeout関数を使用する方法が混乱しています。私がしようとしているのは、配列に基づいてdivを1つずつ強調表示することです。ここに私のコードは次のとおりです。

for (i = 0; i < strArray.length; i++) { 
    doSetTimeout(i, colors, strArray); 
} 

と、関数は、doSetTimeout：

this threadに基づいて

function doSetTimeout(i, colors, strArray) { 
    $("use." + strArray[i]).css("fill", colors[Math.floor((Math.random() * colors.length) + 1)]); 
    setTimeout(function() { 
    $("use").css("fill", "#333333"); 
    }, 1000); 
} 

、私は色の変化を行うための独立した機能を持つことが、問題を解決するだろうと思ったが、私はまだですすべてのdivが同時にフラッシュする問題があります。誰でも問題が何であるか知っていますか？これを行うには別の方法がありますか？

Answer 1

代わりにsetIntervalを使用しないのはなぜですか？

var i = 0;   
    var intervalID = setInterval(function() { 

     if (i < strArray.length) { 
      $("use").css("fill", "#333333"); 
      $("use." + strArray[i]).css("fill", colors[Math.floor((Math.random() * colors.length) + 1)]); 
      clearInterval(intervalID) 
     } 
     i++; 
    }, 1000); 

Answer 2

あなたはこのようにそれを行うことができます：

(function doSetTimeout(i, colors, strArray) { 
    if (i >= strArray.length) return; // nothing more to do 
    $("use." + strArray[i]).css("fill", colors[Math.floor((Math.random() * colors.length) + 1)]); 
    setTimeout(function() { 
    $("use").css("fill", "#333333"); 
    // call the function recursively 
    doSetTimeout(i+1, colors, strArray); 
    }, 1000); 
})(0, colors, strArray); // Execute immediately for index 0 

は、これは、関数を作成し、配列の最初の要素のために、すぐにそれを実行します。

他のすべての呼び出しは、前のタイムアウトイベントがトリガーされたときにのみ実行されます。これにより、順次処理が保証されます。

doSetTimeoutの最後の呼び出しで新しいタイムアウトがスケジュールされていないため、すべての要素が処理されるとすべてが終了します。あなたはこのようにそれを行うことができます

Answer 3

：あなたが時間を変更していないので

function doSetTimeout(i, colors, strArray) { 
    if(i >= strArray.length) return; 

    $("use." + strArray[i]).css("fill", colors[Math.floor((Math.random() * colors.length) + 1)]); 
    setTimeout(function() { 
    $("use").css("fill", "#333333"); 

    doSetTimeout(i + 1, colors, strArray); 
    }, 1000); 
} 

doSetTimeout(0, colors, strArray);