Chronomètre en ligne

Un chronomètre en ligne est un outil de chronométrage de précision qui mesure le temps écoulé depuis zéro, généralement avec une résolution à la milliseconde. Contrairement à un minuteur de compte à rebours, un chronomètre répond à « combien de temps cela a-t-il pris ? », ce qui le rend idéal pour l'entraînement sportif, les expériences de laboratoire, les présentations, la cuisine, les sprints de codage et toute activité où vous devez suivre une durée. Cet outil s'exécute entièrement dans votre navigateur en utilisant requestAnimationFrame pour des mises à jour fluides et performance.now() pour une mesure du temps monotone, restant ainsi précis même lorsque l'horloge système est ajustée. L'enregistrement des tours permet de capturer les temps intermédiaires avec mise en évidence du meilleur/pire tour, et toutes les données restent locales — rien n'est téléchargé.

Le moteur du chronomètre évite complètement le modèle setInterval sujet à la dérive. Au lieu de cela, il utilise requestAnimationFrame (rAF) pour les mises à jour d'affichage et performance.now() comme source de temps de référence. Lorsque l'utilisateur clique sur Démarrer, le moteur enregistre le timestamp performance.now() actuel comme startTime. À chaque trame d'animation, il calcule elapsed = accumulated + (performance.now() - startTime), où accumulated conserve le temps total écoulé avant la dernière pause. Ce modèle à deux variables (temps accumulé + delta d'exécution) gère correctement les cycles pause/reprise sans perte de précision inférieure à la milliseconde. performance.now() est choisi plutôt que Date.now() car il est monotone — il ne recule jamais en raison de corrections NTP, de changements manuels d'horloge ou de transitions d'heure d'été. Il offre également une résolution inférieure à la milliseconde (généralement une granularité de 5 µs dans les navigateurs modernes), ce qui en fait la bonne horloge pour le chronométrage de courte durée et de haute précision. Le rappel rAF est limité au taux de rafraîchissement de l'écran (généralement 60 Hz = ~16,67 ms, jusqu'à 120 Hz sur les écrans à haut taux de rafraîchissement), de sorte que la mise à jour visuelle est fluide mais n'est pas la la référence — le temps écoulé réel provient du calcul performance.now(), qui est continuellement correct. L'enregistrement des tours capture le elapsedMs actuel au moment où le bouton Tour est cliqué, en calculant la différence de fraction par rapport au total du tour précédent. Les tours les plus rapides et les plus lents sont déterminés en comparant toutes les différences de tour avec Math.min/Math.max, et l'affichage les met en évidence avec des styles vert et rouge respectivement. Tout l'état réside dans les hooks useState de React au sein du composant client, et aucune donnée n'est persistée ou transmise — le chronomètre est éphémère par conception, se réinitialisant complètement à la fermeture de la page ou à l'appui sur le bouton Réinitialiser.

• performance.now() fournit des timestamps monotones de précision inférieure à la milliseconde — insensibles aux changements d'horloge système.
• requestAnimationFrame pilote les mises à jour d'affichage au taux de rafraîchissement (60–120 Hz) pour un rendu fluide.
• Le modèle temps accumulé + delta d'exécution gère pause/reprise sans perte de précision.
• Les différences de tour sont calculées comme currentTotal - previousTotal pour un chronométrage fractionné précis.
• Tous les calculs s'exécutent localement dans le navigateur ; aucun aller-retour serveur ni téléchargement de données.