flip - Flip-Uhr- & Zähler-Bibliothek für das Web

 (pqina.nl)
6 Punkte von xguru 2020-04-16 | 4 Kommentare | Auf WhatsApp teilen

  • Plug-in für eine Flip-Uhr mit fallenden Ziffern

  • Verwendbar für Countdown, Uhr usw.

  • Keine Abhängigkeiten, responsiv/mobil, schnelle Animationen

  • Synchronisierung mit der Serverzeit

  • Mehrfache Änderungen pro Sekunde und Überlappungen möglich

  • Timer-Algorithmus korrigiert automatisch den Drift von JS setInterval

Verwandte Beiträge

4 Kommentare

 
xguru 2020-04-16

Verwendet intern eine sogenannte Tick-Engine: https://github.com/pqina/tick/

Eine Bibliothek, die Flip-, digitale Punkt-, Zahlenanimations- und Linien- (gerade, Kreis) sowie Boom- (mit Ton) Darstellungen unterstützt
 
kunggom 2020-04-16

Ich fand es faszinierend, dass setTimeout-Drift automatisch korrigiert wird, und habe mich gefragt, an welcher Stelle das passiert. Wie sich zeigt, wird das im Teil timer.js der Tick-Engine behandelt. Vereinfacht gesagt wird zu Beginn, wenn die Zeit zu laufen beginnt, mit Date.now() + interval die genaue Epoch-Zeit des nächsten Ticks (tickExpectedTime) berechnet. Wenn dann mit setTimeout() der nächste Tick kommt, wird der aktuelle Wert von Date.now() (currentTime) mit tickExpectedTime verglichen, um zu bestimmen, wie groß die Abweichung ist.

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

Wie ich gerade sehe, gibt es auch eine einfache Korrektur für die Synchronisierung der Serverzeit. Dabei wird die Zeitdifferenz zwischen dem Senden und dem Empfangen der Anfrage geprüft, und die Hälfte dieser Differenz (= ungefähr die Zeit, die die Übertragung vom Server zum Client benötigt) zur vom Server geholten Zeit addiert. Das dient dazu, die Uhrzeit möglichst genau zu synchronisieren. Allerdings ist der Zeitwert im HTTP-Header nur auf Sekundenebene, daher scheint es unwahrscheinlich, dass es in den meisten Fällen große Abweichungen gibt …
 
kunggom 2022-08-17

Wie ich erst später erfahren habe, nennt man eine solche Zeitsynchronisationsmethode, bei der zu dem vom Server abgerufenen Zeitwert die Hälfte der Round-Trip-Time (RTT) addiert wird, den „Cristian-Algorithmus“ (Cristian's algorithm).

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