Estoy creando un juego estilo Simon y puedo hacer que la animación reproduzca el último color del patrón, pero no reproducirá el patrón completo. He probado un par de cosas diferentes:
function nextTurn() { patternComputer.push(getNextColor()); for (i = 0; i < patternComputer.length; i++) { setTimeout(function() { animateColor(patternComputer[i]); playSound(patternComputer[i]); }, 500); } patternPlayer.length = 0; } Este se ejecuta a través del bucle for pero no entra en la función setTimeout en absoluto hasta que haya pasado el tiempo, pero para entonces, no i en lo correcto. También he intentado sacarlo de setTimeout por completo, pero eso, por supuesto, hace que todas las animaciones y sonidos se reproduzcan a la vez. ¿Cómo puedo hacer que se anime y reproducir el sonido de patternComputer[0] y luego esperar medio segundo y luego reproducir patternComputer[1] y luego esperar medio segundo y luego reproducir patternComputer[2]... etc. No puedo entender cómo pausar el código y dejar que recorra lentamente cada iteración. es posible? ¿Debería encontrar una solución diferente? ¡Gracias! :)
Tenga en cuenta que javascript se ejecuta en un único subproceso mediante el bucle de eventos .
El problema aquí es que está registrando n tiempos de espera que se ejecutarán 500 ms después de que el hilo principal los registre. Todos se ejecutarán casi al mismo tiempo una vez que pasen esos 500 ms.
Para corregir su código y hacer que se ejecuten con una separación de 500 ms, deberá devolver la llamada a su código desde setTimeout. Otra solución más simple (pero no ideal) sería algo como esto:
for (i = 0; i < patternComputer.length; i++) { setTimeout(function() { animateColor(patternComputer[i]); playSound(patternComputer[i]); }, 500 * (i+1)); }