Verzögerung zwischen jeder Iteration der foreach-Schleife?

Question

so mache ich ein Simon sagt Spiel. Diese Funktion zeigt die aktuelle Sequenz an. Das Problem dabei ist, dass es nicht wirklich in einer netten Reihenfolge abläuft, sondern alles auf einmal macht. Sage die Farben sind „blau“, „rot“ und „gelb, werden sie alle zur gleichen Zeit gehen und nicht in Folge. Wie kann ich dieses Problem beheben?

var displaySequence = function(){ 
    compSequence.forEach(function(color){ 
     $("#" + color).fadeTo(300, 0.5).fadeTo(300, 1.0); 
    }) 
} 

Answer 1

a keine jQuery Lösung. Sie müssen t o Verwenden Sie den Array-Index, um die Illusion des Wartens zwischen jedem Aufruf zu geben, jedoch hat jede Funktion bereits ausgeführt. Was passiert, ist: Show Farbe 1 in 1 Sekunde, zeigen Farbe 2 in 2 Sekunden ...

var displaySequence = function(){ 
    compSequence.forEach(function(color, index){ 
     setTimeout(function(){ 
      $("#" + color).fadeTo(300, 0.5).fadeTo(300, 1.0); 
     }, 
     1000 * index); 
    }) 
} 

stellen Sie den 1000 * Index der Verzögerung zu ändern.

Answer 2

I Verwendung des jQuery machen Verzögerung Funktion

Hier ist eine der Javascript.

$(document).ready(function(){ 

    var compSequence = new Array("red", "blue", "yellow"); 

    var displaySequence = function() { 

     $.each(compSequence, function (i, color) { 
     // add delay 
     $("#" + color).delay(i * 1000).fadeTo(300, 0).fadeTo(300, 1.0); 
     });  
    } 

    displaySequence(); 

}); 

Hier ist ein DEMO