Creé una matriz que almacena las identificaciones de los botones. Los ID de los botones son #red , #green , #blue y #yellow
Creé otra función que selecciona aleatoriamente un color y lo almacena dentro de otra matriz.
Estoy tratando de iterar la segunda matriz usando un bucle for y usar un efecto de aparición/desaparición gradual en los botones para que el resultado sea un efecto de aparición y desaparición ordenada.
Por ejemplo:
array = ['red','green','blue'];Primero, el botón rojo aparece y desaparece, luego el verde y, por último, el azul.
El resultado que obtengo es un efecto de entrada y salida casi al mismo tiempo. ¿Alguien puede proporcionar una solución y decirme por qué sucede?
var buttonColours = ["red", "blue", "green", "yellow"]; var GamePattern = []; function nextSequence() { var randomNumber = Math.floor((Math.random() * 4)); var randomChosenColour = buttonColours[randomNumber] GamePattern.push(randomChosenColour); } function playSequence(sequence) { for (var i = 0; i < sequence.length; i++) { $("#" + sequence[i]).fadeOut(1000).fadeIn(1000) } } nextSequence() nextSequence() nextSequence() playSequence(GamePattern) <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet"> <h1 id="level-title">Press A Key to Start</h1> <div class="container"> <div lass="row"> <div type="button" id="green" class="btn green"></div> <div type="button" id="red" class="btn red"></div> </div> <div class="row"> <div type="button" id="yellow" class="btn yellow"></div> <div type="button" id="blue" class="btn blue"></div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>El problema con su código es que ejecuta todos los efectos de desvanecimiento al mismo tiempo.
Puede simplificar el enfoque y el código al aleatorizar el orden de su matriz de entrada y luego iterarlo para desvanecer los elementos relevantes, agregando un retraso incremental a cada uno para que solo ocurra un desvanecimiento a la vez en secuencia. Prueba esto:
// shuffle logic credit: https://stackoverflow.com/a/2450976/519413 @coolaj86 function shuffle(array) { let currentIndex = array.length, randomIndex; while (currentIndex != 0) { randomIndex = Math.floor(Math.random() * currentIndex); currentIndex--; [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]]; } return array; } var buttonColours = ["red", "blue", "green", "yellow"]; shuffle(buttonColours).forEach((id, i) => { $('#' + id).delay(i * 2000).fadeOut(1000).fadeIn(1000); }); .container .row { display: inline-block; } .container .row .btn { width: 100px; height: 100px; display: inline-block; } .btn.green { background-color: #0C0; } .btn.red { background-color: #C00; } .btn.yellow { background-color: #CC0; } .btn.blue { background-color: #00C; } <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet"> <h1 id="level-title">Press A Key to Start</h1> <div class="container"> <div class="row"> <div type="button" id="green" class="btn green"></div> <div type="button" id="red" class="btn red"></div> </div> <div class="row"> <div type="button" id="yellow" class="btn yellow"></div> <div type="button" id="blue" class="btn blue"></div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>Javascript es asincrónico de forma predeterminada, lo que significa que no esperará a que aparezca o desaparezca a menos que se lo indique explícitamente.
Aconsejaría usar un comando simple setTimeout , consulte aquí para obtener más información y alternativas
Por ejemplo, si cambia esta parte:
for (var i=0 ; i<sequence.length ; i++){ $("#" + sequence[i]).fadeOut(1000).fadeIn(1000) }A esto:
for (var i=0 ; i<sequence.length ; i++){ setTimeout(function() { $("#" + sequence[i]).fadeOut(1000).fadeIn(1000) }, 2000) }Esperará 2000 milisegundos antes de pasar al siguiente punto del bucle.