flip - 웹용 플립 시계 & 카운터 라이브러리
(pqina.nl)- 숫자가 떨어지는 플립시계 플러그인
- 카운트 다운, 시계등에 사용
- 의존성 없음, 반응형/모바일, 빠른 애니메이션
- 서버 시간 동기화
- 초당 여러번 변경 및 겹치기 가능
- 타이머 알고리듬이 JS setInterval drift를 자동 보정
내부적으로 tick 엔진이라는 것을 사용 https://github.com/pqina/tick/
플립, 디지털 도트형, 숫자 애니메이션, 라인 ( 직선, 원 ) , 붐 ( 소리내는 것) 등을 지원하는 라이브러리
setTimeout Drift를 자동 보정한다는 게 신기해서 어느 부분에서 하나 했더니. 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
지금 보니까 서버 시간 동기화에도 간단한 보정이 들어가 있군요. 요청을 할 때와 받을 때의 시간차를 체크해서, 그 시간차의 절반(=대략 서버에서 클라이언트로 수신하는 동안 걸린 시간)만큼을 서버에서 가져온 시간에 더해 줍니다. 가능한 한 정확한 시각을 동기화하기 위해서지요. 근데 HTTP 헤더의 시간값은 초 단위라서 웬만해서는 큰 시차가 없을 것 같기도…
나중에 알게 된 것인데, 이렇게 서버에서 가져온 시간값에 왕복 시간(RTT)의 절반을 더해주는 시간 동기화 방식을 ‘크리스티안 알고리듬’(Cristian's algorithm)이라고 한다는군요.
https://en.wikipedia.org/wiki/Cristian%27s_algorithm
https://www.geeksforgeeks.org/cristians-algorithm/