Minuteur de Compte à Rebours

Un minuteur de compte à rebours part d’une durée choisie et descend jusqu’à zéro. Il sert pour le travail concentré, la cuisine, les intervalles sportifs, les cours, les réunions, les discours et toute activité où il faut respecter un bloc de temps précis. Contrairement au chronomètre, qui mesure le temps écoulé depuis zéro, le compte à rebours rend visible le temps restant et le point de fin. Cela aide à garder le rythme, conclure au bon moment et éviter les dépassements. Cette page propose aussi un chronomètre et plusieurs minuteurs, utiles pour les tours, les segments ou les tâches en parallèle. Comme le calcul tourne dans l’onglet ouvert, gardez la page active pour les rappels importants.

Le moteur de compte à rebours n'utilise pas setInterval(callback, 1000) comme horloge de référence — cette approche accumule une dérive car la spécification de la boucle d'événements HTML5 ne garantit qu'un délai minimum, pas un cadencement fixe. À la place, la page enregistre un startTime via Date.now() (ou performance.now() pour une résolution inférieure à la milliseconde) et à chaque tick calcule remaining = targetDuration - (Date.now() - startTime). Le rafraîchissement de l'affichage est piloté par requestAnimationFrame, cadencé par le navigateur au rythme du vsync de l'écran (généralement 60 Hz / 16,67 ms, parfois 120 Hz sur les ordinateurs et téléphones à haut taux de rafraîchissement). Cette conception auto-corrective maintient les secondes affichées synchronisées avec l'horloge murale même après que la file de tâches JavaScript ait été bloquée par le ramasse-miettes ou une mise en page longue. La restriction des onglets en arrière-plan est la principale source de surprises pour les minuteurs. Selon le HTML Living Standard, les onglets masqués limitent setInterval/setTimeout à un minimum de 1 000 ms (Chrome, Firefox et Safari implémentent cela avec leurs propres heuristiques ; Chrome gèle en outre les onglets inactifs au bout d'environ 5 minutes sur batterie). L'API Page Visibility (document.visibilityState, document.hidden, l'événement visibilitychange) permet au minuteur de détecter un changement d'onglet et de réconcilier son horloge interne avec Date.now() lorsque l'onglet redevient visible. Le son de fin de compte à rebours est lu via l'API Web Audio (AudioContext + OscillatorNode ou un AudioBuffer préchargé), qui nécessite une activation par un geste utilisateur préalable sur iOS Safari et Chrome moderne pour satisfaire la politique d'autoplay. Une alerte visuelle est également affichée en complément, et si l'utilisateur a accordé la permission au préalable, une notification système peut être envoyée via l'API Notification. Le mode multi-minuteurs conserve chaque minuteur dans son propre objet d'état avec un startTime indépendant ; une seule boucle requestAnimationFrame parcourt le tableau à chaque image plutôt que de lancer un intervalle distinct par minuteur, ce qui maintient la charge CPU constante à mesure que le nombre de minuteurs augmente. La persistance entre les rechargements utilise localStorage avec un endTime sérialisé, ce qui permet à la page de recalculer le temps restant au montage. Notez que les corrections d'horloge murale par le système d'exploitation (changement manuel de l'heure, saut NTP ou transition d'heure d'été) décalent Date.now() instantanément et peuvent faire apparaître un saut dans un minuteur récupéré — performance.now() est monotone et est préféré lorsque seul le temps écoulé compte au sein d'un seul chargement de page.

• Utiliser Date.now() ou performance.now() comme source de vérité ; ne jamais faire confiance aux ticks setInterval accumulés.
• requestAnimationFrame plafonne le repeint au vsync de l'écran (60 Hz = ~16,67 ms ; 120 Hz = ~8,33 ms).
• Les onglets masqués limitent setInterval à un minimum de 1 000 ms selon la spec HTML ; Chrome peut geler la page après ~5 min sur batterie.
• L'API Page Visibility (événement visibilitychange) est le point d'accroche pour réconcilier le minuteur lorsque l'onglet revient au premier plan.
• L'API Web Audio nécessite une activation par un geste utilisateur préalable sur iOS Safari et Chrome pour satisfaire la politique d'autoplay.
• L'API Notification nécessite Notification.requestPermission() et un contexte sécurisé (HTTPS ou localhost).
• performance.now() est monotone à travers les sauts NTP et les transitions d'heure d'été ; Date.now() ne l'est pas — choisissez en conséquence.