Estoy desarrollando un juego en JavaScript en el que el usuario debe dar una entrada clave (presionar la barra espaciadora) cuando la manecilla de un reloj se mueve un poco más de lo habitual. Actualmente, estoy usando una función setTimeout que le da al usuario 1 segundo para dar una entrada clave después de que la manecilla del reloj haya marcado (girado 10 grados). Si el usuario presiona espacio correctamente cuando la manecilla del reloj se mueve más de lo normal (15 grados), un indicador parpadeará en verde, de lo contrario, parpadeará en rojo.
El problema al que me estoy enfrentando es que una vez que el usuario da una entrada dentro de 1 segundo del movimiento de la mano, el indicador no parpadeará hasta DESPUÉS de que haya pasado 1 segundo (es decir, si el usuario da una entrada después de 0,4 segundos, el indicador parpadeará). no parpadea hasta 0.6 más tarde)
Sé que esto se debe a que el indicador está configurado en mi función setTimeout , que solo ejecutará el código después de 1 segundo. Intenté probar la entrada del usuario fuera de la función setTimeout , pero de esa manera el usuario no tiene 1 segundo para dar una respuesta.
Me preguntaba si hay una forma de evitar este problema o una mejor manera de abordarlo.
//Get input after clock tick setTimeout(() => { if (irregular_tick && space_pressed) { flashScreenGreen(); } if (!(space_pressed) && irregular_tick) { flashScreenRed(); } },1000);¡Gracias por cualquier ayuda!
Deberá mantener una referencia a su temporizador fuera de la devolución de llamada setTimeout y agregar un oyente para la pulsación de tecla con una devolución de llamada de interrupción que borrará el tiempo de espera si se cumplen todas las condiciones.
let timer = null; let space_pressed = false; function reset() { timer = null; space_pressed = false; } function interruptHandler(e) { if (timer !== null) { // only look for spacebar if timer is running space_pressed = e.key === ' '; if (irregular_tick && space_pressed) { // clear timeOut if successful clearTimeout(timer); reset(); flashScreenGreen(); } } } document.body.addEventListener('keyup', interruptHandler); timer = setTimeout(() => { if (!space_pressed && irregular_tick) { flashScreenRed(); } // reset timer at end of callback ready for next run reset(); }, 1000); Como nota al margen, parece que ha definido dos funciones separadas flashScreenGreen() y flashScreenRed() . Supongo que tienen una lógica similar, si no idéntica. Si ese es el caso, es posible que desee considerar la definición de una única función flashScreen() utilidad que acepte un color como parámetro.
function flashScreen(color) { // logic utilizing 'color' } // usage flashScreen('green'); flashScreen('#FF0000'); // red as hexCreo que la función clearTimeout te ayudará aquí
// Hold the reference to the timer const timeoutId = setTimeout(() => { if (irregular_tick && space_pressed) { flashScreenGreen(); //You can use the clearTimeout function to end the timer clearTimeout(timeoutId); } if (!(space_pressed) && irregular_tick) { flashScreenRed(); //clear timeout, if you need it here too clearTimeout(timeoutId); } },1000);