En este ejercicio de JavaScript de cuenta atrás practicarás estados de inicio, pausa y reinicio sin crear intervalos duplicados.
Enunciado
Crea un temporizador de 30 segundos. Al pausar debe conservar el tiempo restante. Al reiniciar debe volver a 30 sin empezar automáticamente.
Solución comentada
Prueba el fragmento dentro del cuerpo de un documento HTML. Incluye la etiqueta viewport si vas a comprobar el resultado en móvil.
<p>Segundos restantes: <output id="segundos">30</output></p>
<button id="inicio" type="button">Iniciar</button>
<button id="pausa" type="button">Pausar</button>
<button id="reinicio" type="button">Reiniciar</button>
<script>
const salida = document.querySelector("#segundos");
let restante = 30000;
let fin = 0;
let intervalo = null;
function pintar() {
salida.value = String(Math.ceil(restante / 1000));
}
function parar() {
clearInterval(intervalo);
intervalo = null;
}
function actualizar() {
restante = Math.max(0, fin - performance.now());
pintar();
if (restante === 0) parar();
}
document.querySelector("#inicio").addEventListener("click", () => {
if (intervalo !== null || restante === 0) return;
fin = performance.now() + restante;
intervalo = setInterval(actualizar, 100);
actualizar();
});
document.querySelector("#pausa").addEventListener("click", () => {
if (intervalo !== null) actualizar();
parar();
});
document.querySelector("#reinicio").addEventListener("click", () => {
parar();
restante = 30000;
pintar();
});
</script>Cada actualización calcula la diferencia hasta el objetivo. Así un retraso de un callback no se acumula como si cada intervalo equivaliera siempre a un periodo exacto. El ejercicio funciona durante la vida de la página.
Cómo comprobar tu solución
- Pulsa Iniciar varias veces y comprueba que no acelera.
- Pausa, espera y reanuda desde el tiempo restante.
- Deja que llegue a cero y reinicia. El valor debe volver a 30.
Reto adicional
Añade un aviso cuando termine. Evita anunciar todos los cambios intermedios en una región viva, para que la actualización no interrumpa continuamente a quien usa un lector de pantalla.
Repasa los conceptos en el tutorial de MasterCodePro.
