Cronómetro y temporizador

El cronómetro cuenta hacia adelante desde cero — úselo para medir cuánto tiempo toma algo. Cocinar una receta, medir el tiempo de un intervalo de entrenamiento, grabar el ensayo de una presentación, realizar el benchmarking de una tarea manual en el trabajo o rastrear cuánto tiempo tarda un niño en hacer la tarea.

La cuenta regresiva cuenta hacia atrás desde una duración establecida hasta cero — úselo cuando necesite detenerse o ser alertado en un momento fijo. Bloques de trabajo Pomodoro, intervalos HIIT, temporizadores de horno, time-boxing de reuniones, sprints de estudio y práctica de exámenes. La alerta sonora al llegar a cero es el objetivo principal.

Ambos funcionan con requestAnimationFrame para obtener una precisión según la tasa de refresco del monitor (típicamente 60 o 120 Hz). La pantalla se actualiza en cada fotograma; el tiempo subyacente se mide con performance.now(), que tiene una resolución de sub-milisegundos.

La mayoría de los tutoriales de temporizadores para navegador usan setInterval con un pulso de 10 ms o 100 ms, y luego incrementan un contador. Ese enfoque tiene desviaciones: setInterval se limita a 1000 ms en pestañas en segundo plano y acumula errores de redondeo en periodos largos.

Este cronómetro, en cambio, registra una única marca de tiempo performance.now() al inicio y calcula elapsed = now − start en cada fotograma de animación. No hay desviación — incluso después de funcionar por una hora, el tiempo mostrado coincide con el tiempo real transcurrido con una diferencia de pocos milisegundos.

Pausar y reanudar funciona acumulando el delta transcurrido en un total acumulado cuando pausa, y luego reiniciando la marca de tiempo de inicio cuando reanuda. El total acumulado sobrevive a cualquier número de ciclos de pausa/reanudación sin perder precisión.

Los tiempos de vuelta (laps) son instantáneas del valor transcurrido; no reinician el cronómetro en marcha. Puede registrar docenas de vueltas sin afectar al temporizador principal.

Pomodoro: cuenta regresiva de 25 minutos para trabajo enfocado, 5 minutos de descanso. Apile cuatro ciclos y luego un descanso más largo de 15–30 minutos. La alerta sonora le permite ignorar completamente el temporizador hasta que suene.

HIIT y Tabata: 20 segundos de trabajo + 10 segundos de descanso × 8 rondas. Use el botón de vuelta (lap) en el cronómetro para registrar cada ronda, o configure una cuenta regresiva de 4 minutos y observe los segundos para las transiciones.

Cocina: cuenta regresiva para horneados y asados que no requieren supervisión constante. Use el cronómetro para tareas de sellado y reposo donde necesite saber exactamente cuánto tiempo ha estado reposando la proteína.

Discursos y presentaciones: cronómetro frente a usted durante la práctica; cuenta regresiva cuando tenga un límite de tiempo estricto (charlas TED, lightning talks, presentaciones de ventas).

Consejo: mantenga esta pestaña abierta en primer plano para una cuenta regresiva más precisa — las pestañas en segundo plano limitan requestAnimationFrame a ~1 fotograma por segundo para ahorrar batería; esto no afecta al tiempo total transcurrido, pero sí afecta a la fluidez de la pantalla.

Limitación de pestañas en segundo plano: Chrome y Safari limitan agresivamente las pestañas en segundo plano. La cuenta regresiva seguirá activando la alarma en el momento correcto (porque utilizamos una verificación de reloj real, no un contador de pulsos), pero la pantalla no se actualizará de forma fluida.

Computadora en suspensión: si su laptop entra en estado de suspensión, los temporizadores del navegador se pausan por completo. La cuenta regresiva se reanudará desde donde se detuvo, no desde donde debería estar — para cualquier cronometraje que deba ejecutarse durante la suspensión, use una alarma de teléfono o un programador a nivel de sistema operativo.

Alerta sonora bloqueada: la mayoría de los navegadores bloquean el audio de reproducción automática hasta que el usuario interactúa con la página. Haga clic en Start una vez y la alerta al llegar a cero sonará; si carga esta página en una pestaña en segundo plano y nunca hace clic, el contexto de audio no podrá inicializarse.

Precisión de las vueltas: las vueltas capturan el tiempo transcurrido en el momento en que hace clic. El tiempo de reacción es de ~200 ms — para una precisión de menos de un segundo, utilice una revisión de video en lugar de un botón de vuelta manual.