Cronómetro online

Un cronómetro online es una herramienta de cronometraje de precisión que mide el tiempo transcurrido desde cero hacia arriba, normalmente con resolución de milisegundos. A diferencia de un temporizador de cuenta regresiva, un cronómetro responde a "¿cuánto tardó eso?", lo que lo hace ideal para entrenamiento deportivo, experimentos de laboratorio, presentaciones, cocina, sprints de programación y cualquier actividad donde necesites medir la duración en lugar de forzar un punto final fijo. Esta herramienta se ejecuta completamente en tu navegador usando requestAnimationFrame para actualizaciones suaves de pantalla y performance.now() para medición de tiempo monótona, por lo que se mantiene preciso incluso cuando se ajusta el reloj del sistema. El registro de vueltas permite capturar tiempos parciales con resaltado de mejor/peor vuelta, y todos los datos permanecen locales — nada se sube.

El motor del cronómetro evita completamente el patrón setInterval propenso a la deriva. En su lugar, usa requestAnimationFrame (rAF) para actualizaciones de pantalla y performance.now() como fuente de tiempo de referencia. Cuando el usuario hace clic en Iniciar, el motor registra la marca de tiempo actual de performance.now() como startTime. En cada frame de animación, calcula elapsed = accumulated + (performance.now() - startTime), donde accumulated mantiene el tiempo total transcurrido antes de la pausa más reciente. Este modelo de dos variables (tiempo acumulado + delta de ejecución) maneja correctamente los ciclos de pausa/reanudación sin perder precisión sub-milisegundo. Se elige performance.now() sobre Date.now() porque es monótono — nunca salta hacia atrás debido a correcciones NTP, cambios manuales de reloj o transiciones de horario de verano. También proporciona resolución sub-milisegundo (típicamente 5 µs de granularidad en navegadores modernos), convirtiéndolo en el reloj adecuado para cronometraje de corta duración y alta precisión. La callback de rAF se limita a la tasa de refresco de la pantalla (típicamente 60 Hz = ~16.67 ms, hasta 120 Hz en pantallas de alto refresco), por lo que la actualización visual es suave pero no es la la referencia — el tiempo transcurrido real proviene del cálculo de performance.now(), que es continuamente correcto. El registro de vueltas captura el elapsedMs actual en el momento en que se hace clic en el botón de Vuelta, calculando la diferencia parcial contra el total de la vuelta anterior. Las vueltas más rápidas y más lentas se determinan comparando todas las diferencias de vuelta con Math.min/Math.max, y la pantalla las resalta con estilos verde y rojo respectivamente. Todo el estado vive en hooks useState de React dentro del componente cliente, y ningún dato se persiste o transmite — el cronómetro es efímero por diseño, reiniciándose completamente cuando se cierra la página o se presiona el botón Reiniciar.

• performance.now() proporciona marcas de tiempo monótonas y sub-milisegundo — inmune a cambios del reloj del sistema.
• requestAnimationFrame impulsa actualizaciones de pantalla a la tasa de refresco (60–120 Hz) para renderizado suave.
• El modelo de tiempo acumulado + delta de ejecución maneja pausa/reanudación sin pérdida de precisión.
• Las diferencias de vuelta se calculan como currentTotal - previousTotal para cronometraje parcial preciso.
• Todo el cálculo se ejecuta localmente en el navegador; sin viajes de ida y vuelta al servidor ni subidas de datos.