flip - Thư viện đồng hồ lật & bộ đếm cho web

 (pqina.nl)
6 điểm bởi xguru 2020-04-16 | 4 bình luận | Chia sẻ qua WhatsApp

  • Plugin đồng hồ lật với các con số rơi xuống

  • Dùng cho đếm ngược, đồng hồ, v.v.

  • Không có dependency, responsive/mobile, hoạt ảnh nhanh

  • Đồng bộ thời gian máy chủ

  • Có thể thay đổi nhiều lần mỗi giây và chồng lấp

  • Thuật toán bộ hẹn giờ tự động hiệu chỉnh độ trôi của setInterval trong JS

Bài viết liên quan

4 bình luận

 
xguru 2020-04-16

Nội bộ sử dụng một thứ gọi là tick engine: https://github.com/pqina/tick/

Một thư viện hỗ trợ kiểu lật, dạng chấm kỹ thuật số, hoạt ảnh số, line (thẳng, tròn), boom (phát ra âm thanh), v.v.
 
kunggom 2020-04-16

Việc tự động hiệu chỉnh độ lệch của setTimeout khá thú vị nên mình thử xem nó xử lý ở phần nào, thì thấy đang được xử lý trong phần timer.js của engine tick. Nói ngắn gọn, khi thời gian bắt đầu chạy, nó dùng Date.now() + interval để tính epoch chính xác của tick tiếp theo (tickExpectedTime), rồi khi tick tiếp theo đến qua setTimeout(), nó lấy giá trị Date.now() hiện tại (currentTime) so sánh với tickExpectedTime để xác định mức độ sai lệch.

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

Giờ nhìn lại mới thấy có cả một hiệu chỉnh đơn giản cho việc đồng bộ thời gian máy chủ nữa. Nó kiểm tra độ chênh thời gian giữa lúc gửi yêu cầu và lúc nhận phản hồi, rồi cộng thêm một nửa khoảng chênh đó (= xấp xỉ thời gian truyền từ máy chủ đến máy khách) vào thời gian lấy từ máy chủ. Mục đích là để đồng bộ thời gian chính xác nhất có thể. Nhưng giá trị thời gian trong header HTTP chỉ ở đơn vị giây, nên có lẽ bình thường cũng khó mà lệch nhiều…
 
kunggom 2022-08-17

Sau này tôi mới biết cách đồng bộ thời gian bằng việc cộng thêm một nửa thời gian khứ hồi (RTT) vào giá trị thời gian lấy từ máy chủ như thế này được gọi là “thuật toán Cristian” (Cristian's algorithm).

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