flip - ไลบรารีนาฬิกาแบบพลิก & ตัวนับสำหรับเว็บ

• ปลั๊กอินนาฬิกาแบบพลิกที่มีตัวเลขพลิกลง

• ใช้สำหรับนับถอยหลัง นาฬิกา เป็นต้น

• ไม่มี dependency, รองรับ responsive/มือถือ, แอนิเมชันรวดเร็ว

• ซิงก์เวลาเซิร์ฟเวอร์

• เปลี่ยนค่าได้หลายครั้งต่อวินาทีและซ้อนทับกันได้

• อัลกอริทึมตัวจับเวลาชดเชย setInterval drift ของ JS โดยอัตโนมัติ

[xguru]

ภายในใช้สิ่งที่เรียกว่าเอนจิน tick https://github.com/pqina/tick/

ไลบรารีที่รองรับฟลิป, ดิจิทัลแบบจุด, แอนิเมชันตัวเลข, เส้น (เส้นตรง, วงกลม), บูม (แบบมีเสียง) เป็นต้น

[kunggom]

สิ่งที่น่าสนใจคือมันบอกว่าชดเชย setTimeout Drift ให้อัตโนมัติได้ เลยลองดูว่าจัดการตรงไหน ก็พบว่ามันทำในส่วน timer.js ของ tick engine ครับ พูดแบบง่าย ๆ คือ ตอนเริ่มต้นให้เวลาเดิน มันจะคำนวณ Date.now() + interval เพื่อหา epoch ที่แม่นยำของ tick ถัดไป (tickExpectedTime) จากนั้นเมื่อ tick ถัดไปมาถึงผ่าน setTimeout() ก็จะนำค่า Date.now() ปัจจุบัน (currentTime) ไปเทียบกับ tickExpectedTime เพื่อดูว่าคลาดเคลื่อนไปมากแค่ไหน

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

[kunggom]

ตอนนี้พอดูแล้วก็มีการชดเชยแบบง่าย ๆ สำหรับการซิงก์เวลาเซิร์ฟเวอร์อยู่ด้วยนะครับ โดยจะตรวจสอบส่วนต่างของเวลาตอนส่งคำขอกับตอนรับกลับมา แล้วนำครึ่งหนึ่งของส่วนต่างนั้น (= เวลาที่ใช้โดยประมาณระหว่างส่งจากเซิร์ฟเวอร์มาถึงไคลเอนต์) ไปบวกเพิ่มกับเวลาที่ดึงมาจากเซิร์ฟเวอร์ ทั้งนี้ก็เพื่อซิงก์เวลาให้ได้แม่นยำที่สุดเท่าที่จะเป็นไปได้ แต่ค่าเวลาใน HTTP header เป็นระดับวินาที เลยรู้สึกว่าปกติก็คงไม่ค่อยมีความคลาดเคลื่อนมากนัก…

[kunggom]

มารู้ทีหลังว่ารูปแบบการซิงก์เวลาที่เอาค่าเวลาซึ่งดึงมาจากเซิร์ฟเวอร์มาบวกครึ่งหนึ่งของเวลาไป-กลับ (RTT) แบบนี้ เรียกว่า ‘Cristian's algorithm’ นั่นเอง

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