6 poin oleh xguru 2020-04-16 | 4 komentar | Bagikan ke WhatsApp
  • Plugin jam flip dengan angka yang jatuh

  • Digunakan untuk hitung mundur, jam, dan lainnya

  • Tanpa dependensi, responsif/mobile, animasi cepat

  • Sinkronisasi waktu server

  • Dapat berubah beberapa kali per detik dan ditumpuk

  • Algoritme timer secara otomatis mengoreksi drift setInterval JS

4 komentar

 
xguru 2020-04-16

Secara internal menggunakan sesuatu yang disebut mesin tick https://github.com/pqina/tick/

Library yang mendukung flip, bentuk titik digital, animasi angka, garis (lurus, lingkaran), boom (yang mengeluarkan suara), dan lain-lain

 
kunggom 2020-04-16

Menarik bahwa setTimeout drift dikoreksi secara otomatis, jadi saya sempat mencari di bagian mana itu dilakukan. Ternyata penanganannya ada di bagian timer.js dari mesin tick. Singkatnya, saat waktu mulai berjalan, ia menghitung Date.now() + interval untuk mendapatkan epoch yang akurat dari tick berikutnya (tickExpectedTime), lalu ketika tick berikutnya datang melalui setTimeout(), nilai Date.now() saat itu (currentTime) dibandingkan dengan tickExpectedTime untuk menghitung seberapa besar galatnya.

https://github.com/pqina/tick/blob/master/src/core/js/timer.js

 
kunggom 2020-04-16

Sekarang saya lihat ternyata ada koreksi sederhana untuk sinkronisasi waktu server juga. Saat melakukan request dan saat menerima respons, selisih waktunya dicek, lalu setengah dari selisih itu (= kira-kira waktu yang dibutuhkan data untuk diterima dari server ke klien) ditambahkan ke waktu yang diambil dari server. Tujuannya agar sinkronisasi waktu dilakukan seakurat mungkin. Tapi karena nilai waktu di header HTTP hanya sampai satuan detik, rasanya dalam kebanyakan kasus tidak akan ada selisih yang besar juga…

 
kunggom 2022-08-17

Baru belakangan saya tahu bahwa metode sinkronisasi waktu seperti ini—menambahkan setengah dari waktu pulang-pergi (RTT) ke nilai waktu yang diambil dari server—ternyata disebut Cristian's algorithm.

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