flip - bibliothèque d’horloge à volets & compteur pour le web

 (pqina.nl)
6 points par xguru 2020-04-16 | 4 commentaires | Partager sur WhatsApp

  • Plugin d’horloge à volets avec chiffres qui basculent

  • Utilisable pour les comptes à rebours, les horloges, etc.

  • Sans dépendance, responsive/mobile, animations rapides

  • Synchronisation avec l’heure du serveur

  • Prise en charge de plusieurs changements par seconde et du chevauchement

  • L’algorithme de minuterie corrige automatiquement la dérive de setInterval en JS

À lire aussi

4 commentaires

 
xguru 2020-04-16

Utilise en interne un moteur tick : https://github.com/pqina/tick/

Une bibliothèque qui prend en charge les flips, les affichages numériques en points, les animations de chiffres, les lignes (droites, cercles) et le boom (effets sonores).
 
kunggom 2020-04-16

Je trouve intéressant le fait qu’il corrige automatiquement la dérive de setTimeout, donc je me suis demandé à quel endroit c’était fait. En regardant, on voit que c’est traité dans la partie timer.js du moteur de tick. En simplifiant, au moment où le temps commence à s’écouler, il calcule Date.now() + interval pour obtenir l’epoch exacte du prochain tick (tickExpectedTime), puis, lorsque le tick suivant arrive via setTimeout(), il compare la valeur actuelle de Date.now() (currentTime) à tickExpectedTime afin de mesurer l’ampleur de l’écart.

https://github.com/pqina/tick/blob/master/src/core/js/timer.js
 
kunggom 2020-04-16

En regardant ça maintenant, je vois qu’il y a aussi une petite correction simple pour la synchronisation avec l’heure du serveur. On vérifie l’écart de temps entre l’envoi de la requête et la réception de la réponse, puis on ajoute à l’heure récupérée depuis le serveur la moitié de cet écart (= en gros le temps mis pour que les données aillent du serveur au client). C’est pour synchroniser l’heure le plus précisément possible. Mais comme la valeur de temps dans l’en-tête HTTP est à la seconde près, j’ai l’impression qu’il ne devrait généralement pas y avoir un gros décalage…
 
kunggom 2022-08-17

J’ai appris plus tard que cette méthode de synchronisation temporelle, qui consiste à ajouter la moitié du temps d’aller-retour (RTT) à la valeur de temps récupérée depuis le serveur, s’appelle l’« algorithme de Cristian » (Cristian's algorithm).

https://en.wikipedia.org/wiki/Cristian%27s_algorithm
https://www.geeksforgeeks.org/cristians-algorithm/