flip - Web向けフリップ時計＆カウンターライブラリ

 (pqina.nl)
6 ポイント 投稿者 xguru 2020-04-16 | 4件のコメント | WhatsAppで共有

  • 数字がめくれるフリップ時計プラグイン

  • カウントダウン、時計などに使用

  • 依存関係なし、レスポンシブ／モバイル対応、高速アニメーション

  • サーバー時刻の同期

  • 1秒間に複数回の変更および重なりに対応可能

  • タイマーアルゴリズムが JS setInterval のドリフトを自動補正

関連記事

4件のコメント

 
xguru 2020-04-16

内部的に tick エンジンを使用 https://github.com/pqina/tick/

フリップ、デジタルドット型、数字アニメーション、ライン（直線、円）、ブーム（音が鳴るもの）などをサポートするライブラリ
 
kunggom 2020-04-16

setTimeout のドリフトを自動補正するというのが面白くて、どの部分でやっているのかと思ったら、tick エンジンの timer.js という部分で処理しているんですね。簡単に言うと、最初に時間が動き始めるときに Date.now() + interval で次の tick の正確な epoch（tickExpectedTime）を求め、その後 setTimeout() で次の tick が来たときに現在の Date.now() の値（currentTime）を tickExpectedTime と比較して、誤差がどの程度あるかを算出する方式です。

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

今見ると、サーバー時刻の同期にも簡単な補正が入っているんですね。リクエストを送るときと受け取るときの時間差をチェックして、その時間差の半分（=おおよそサーバーからクライアントへ受信するまでにかかった時間）だけ、サーバーから取得した時刻に加算しています。できるだけ正確な時刻を同期するためでしょう。とはいえ、HTTPヘッダーの時刻値は秒単位なので、よほどでなければ大きな時差は出なさそうでもあります…
 
kunggom 2022-08-17

後から知ったのですが、このようにサーバーから取得した時刻値に往復時間（RTT）の半分を加える時刻同期方式は、「Cristian's algorithm」と呼ばれているそうです。

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