hourglass_bottom Temporizador de Cuenta Regresiva star

Cómo Mantiene la Cuenta Regresiva Su Precisión

Una cuenta regresiva que simplemente resta un segundo de un total cada vez que se dispara setInterval suena sencilla, pero no es precisa a lo largo del tiempo. Cada "tick" asume que han pasado exactamente 1000 milisegundos, pero el bucle de eventos del navegador puede estar ocupado —otros scripts, animaciones o una pestaña en segundo plano— y los ticks se disparan con unos milisegundos de retraso. Esos pequeños retrasos se acumulan hasta convertirse en una desviación visible: un temporizador de 10 minutos construido así puede terminar varios segundos antes o después de lo previsto al llegar a cero.

Esta herramienta evita ese problema con un método distinto: calcula una marca de tiempo objetivo fija en el momento en que pulsas iniciar —la hora actual más la duración elegida— y en cada tick simplemente pregunta cuánto tiempo queda hasta ese objetivo, en lugar de contar hacia abajo desde un total acumulado. Como el tiempo restante siempre se recalcula a partir de dos lecturas reales del reloj, cualquier retraso acumulado en los ticks se cancela automáticamente; el tiempo mostrado sigue siendo correcto incluso cuando ticks individuales se disparan tarde.

Lo Que Deberías Saber

Cuando la pestaña que estás cronometrando queda en segundo plano, los navegadores suelen limitar los temporizadores para ahorrar batería y CPU, disparándolos con menos frecuencia de la solicitada. El enfoque de la marca de tiempo objetivo también maneja esto sin problemas: no importa cuántos ticks se hayan saltado, porque la cuenta regresiva sigue comparando la hora objetivo real con la hora actual real la próxima vez que se ejecuta — llega a cero en el momento correcto sin importar cuánto se haya limitado la pestaña mientras tanto.

• El sonido de alerta se genera al instante con el nodo oscilador de la Web Audio API — no hay que cargar ningún archivo de audio, así que no hay retraso antes de que suene.
• El título de la pestaña del navegador se actualiza con el tiempo restante, así que puedes echar un vistazo a otra pestaña y seguir viendo la cuenta regresiva.
• Pausar guarda la duración restante y recalcula una nueva marca de tiempo objetivo al reanudar, así que pausar y reanudar tampoco introducen desviación.