flip - biblioteca de relógio flip e contador para web

 (pqina.nl)
6 pontos por xguru 2020-04-16 | 4 comentários | Compartilhar no WhatsApp

  • Plugin de relógio flip com números que viram

  • Usado para contagem regressiva, relógio etc.

  • Sem dependências, responsivo/mobile, animações rápidas

  • Sincronização com a hora do servidor

  • Suporta várias mudanças por segundo e sobreposição

  • O algoritmo do timer corrige automaticamente o drift do setInterval do JS

Leituras relacionadas

4 comentários

 
xguru 2020-04-16

Usa internamente algo chamado engine Tick: https://github.com/pqina/tick/

Uma biblioteca que oferece suporte a flip, estilo digital com pontos, animação de números, linhas (retas, círculos) e boom (com som).
 
kunggom 2020-04-16

Achei interessante que ele corrige automaticamente o drift do setTimeout, então fui ver em que parte isso era feito. Pelo visto, o processamento acontece na parte timer.js do motor de tick. Resumindo, quando o tempo começa a rodar, ele faz Date.now() + interval para calcular o epoch exato do próximo tick (tickExpectedTime) e, quando o próximo tick chega via setTimeout(), compara o valor atual de Date.now() (currentTime) com tickExpectedTime para medir mais ou menos qual foi o erro.

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

Agora que vi, parece que há também uma correção simples para a sincronização com o horário do servidor. Eles verificam a diferença de tempo entre o momento em que a requisição é feita e o momento em que a resposta é recebida, e somam à hora trazida do servidor metade dessa diferença (= aproximadamente o tempo gasto para a resposta ir do servidor ao cliente). Isso é para sincronizar o horário da forma mais precisa possível. Mas como o valor de hora no cabeçalho HTTP é em segundos, também parece que, na maioria dos casos, não deve haver uma diferença tão grande…
 
kunggom 2022-08-17

Só fui descobrir isso depois: esse método de sincronização de tempo, em que se adiciona metade do tempo de ida e volta (RTT) ao valor de tempo obtido do servidor, é chamado de “algoritmo de Cristian” (Cristian's algorithm).

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