flip - Web için flip saat ve sayaç kütüphanesi

 (pqina.nl)
6 puan yazan xguru 2020-04-16 | 4 yorum | WhatsApp'ta paylaş

  • Rakamların düşerek değiştiği bir flip saat eklentisi

  • Geri sayım, saat vb. için kullanım

  • Bağımlılık yok, duyarlı/mobil uyumlu, hızlı animasyon

  • Sunucu saati senkronizasyonu

    Reklam

  • Saniyede birden fazla değişim ve üst üste bindirme mümkün

  • Zamanlayıcı algoritması, JS setInterval drift'ini otomatik olarak düzeltir

İlgili okumalar

4 yorum

 
xguru 2020-04-16

Dahili olarak tick motorunu kullanıyor: https://github.com/pqina/tick/

Flip, dijital nokta tipi, sayı animasyonu, çizgi (düz, daire), boom (ses çıkaran) vb. destekleyen bir kütüphane
 
kunggom 2020-04-16

setTimeout sapmasını otomatik olarak düzelttiği kısmı ilginç geldiği için bunun hangi bölümde yapıldığına baktım; tick motorundaki timer.js bölümünde işleniyormuş. Basitçe anlatmak gerekirse, zaman ilk akmaya başladığında Date.now() + interval ile bir sonraki tick'in doğru epoch zamanı (tickExpectedTime) hesaplanıyor; ardından setTimeout() ile bir sonraki tick geldiğinde o andaki Date.now() değeri (currentTime) tickExpectedTime ile karşılaştırılarak sapmanın ne kadar olduğu bulunuyor.

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

Şimdi bakınca, sunucu saati senkronizasyonu için basit bir düzeltme de eklenmiş. İstek gönderildiğinde ve yanıt alındığında oluşan zaman farkını kontrol edip, bu farkın yarısını (= kabaca sunucudan istemciye gelirken geçen süreyi) sunucudan alınan saate ekliyor. Mümkün olduğunca doğru saati senkronize etmek için tabii. Ama HTTP header'ındaki zaman değeri saniye düzeyinde olduğu için, çoğu durumda büyük bir sapma olmayacak gibi de görünüyor…
 
kunggom 2022-08-17

Bunu sonradan öğrendim; sunucudan alınan zaman değerine gidiş-dönüş süresinin (RTT) yarısını ekleyen bu zaman senkronizasyonu yöntemine “Cristian algoritması” (Cristian's algorithm) deniyormuş.

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