flip - biblioteca de reloj flip y contador para la web

 (pqina.nl)
6 puntos por xguru 2020-04-16 | 4 comentarios | Compartir por WhatsApp

  • Plugin de reloj flip con números que caen

  • Se usa para cuenta regresiva, reloj, etc.

  • Sin dependencias, responsive/móvil, animación rápida

  • Sincronización con la hora del servidor

  • Permite cambios varias veces por segundo y superposición

  • El algoritmo del temporizador corrige automáticamente el drift de setInterval de JS

Lecturas relacionadas

4 comentarios

 
xguru 2020-04-16

Usa internamente algo llamado motor Tick: https://github.com/pqina/tick/

Una biblioteca que admite flip, estilo de puntos digitales, animación numérica, líneas (rectas, circulares) y boom (sonido).
 
kunggom 2020-04-16

Me pareció curioso que corrige automáticamente el drift de setTimeout, así que me puse a ver en qué parte lo hace. Resulta que lo maneja en la parte llamada timer.js del motor de tick. En pocas palabras, cuando el tiempo empieza a correr al principio, hace Date.now() + interval para calcular el epoch exacto del siguiente tick (tickExpectedTime), y luego, cuando llega ese siguiente tick con setTimeout(), compara el valor actual de Date.now() (currentTime) con tickExpectedTime para calcular de cuánto es el error.

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

Ahora que lo veo, también incluye una corrección simple para sincronizar la hora del servidor. Verifica la diferencia de tiempo entre cuando se hace la solicitud y cuando se recibe, y suma a la hora traída del servidor la mitad de esa diferencia (= aproximadamente el tiempo que tarda en llegar del servidor al cliente). Es para sincronizar la hora con la mayor precisión posible. Aunque, como el valor de la hora en el encabezado HTTP está en segundos, da la impresión de que en la mayoría de los casos no habrá una gran diferencia…
 
kunggom 2022-08-17

Resulta que después me enteré de que a este método de sincronización de tiempo, en el que se le suma la mitad del tiempo de ida y vuelta (RTT) al valor de tiempo obtenido del servidor, lo llaman "algoritmo de Cristian" (Cristian's algorithm).

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