Estoy tratando de repetir un patrón de cuenta regresiva 4 veces usando un ciclo while pero no está cooperando.
Básicamente, quiero que primero comience la cuenta regresiva desde 5 segundos, y luego desde 10 segundos y quiero que esto se repita 4 veces.
El código funcionó, pero una vez que lo puse en un bucle while o en cualquier otro bucle, salta como 4 segundos y no se repite.
También probé un do while y un ciclo for pero no cambiaron nada, todavía no se repitió 4 veces.
Cualquier ayuda es muy apreciada.
Código JS relevante:
function startCountDown() { let reps = 1 while (reps <= 4) { setInterval(studyCountDown, 1000); reps++ } } function studyCountDown() { const minutes = Math.floor(studyTime / 60) let seconds = studyTime % 60 if (seconds >= 0) { seconds = seconds < 10 ? '0' + seconds : seconds; countdownOutput.innerHTML = `${minutes}:${seconds}` studyTime--; } else { breakCountDown() } }Su setInterval in loop se ejecuta de forma asincrónica, pero lo bueno es que funciona, pero no como se esperaba. Le recomendaría que tenga una variable global que rastree su ciclo dentro de setInterval que ejecuta su función para manejar la cuenta regresiva.
Modifiqué un poco su lógica justo cuando encontré que mi trabajo era bueno para este fragmento de demostración.
var loop = 1 var seconds = 5 var counter = 1 var interval = null function startCountDown() { document.getElementById("attempts").innerHTML = `Attempt: ${loop}` interval = setInterval(studyCountDown, 1000); } function studyCountDown() { if (counter <= 5) { document.getElementById('counter').innerHTML = `${counter}` counter++; } else { loop++; if (loop > 4) { document.getElementById("attempts").innerHTML = `Done` document.getElementById('counter').innerHTML = `` clearLoop(); } else { seconds = 5; counter = 1; document.getElementById("attempts").innerHTML = `Attempt: ${loop}` document.getElementById('counter').innerHTML = `` } } } function clearLoop() { clearInterval(interval); } <button type="button" onclick="startCountDown()">Click Me!</button> <p id="attempts"></p> <p id="counter"></p> </body> </html>