flip - वेब के लिए Flip Clock & Counter लाइब्रेरी

 (pqina.nl)
6 पॉइंट द्वारा xguru 2020-04-16 | 4 टिप्पणियां | WhatsApp पर शेयर करें

  • अंकों के गिरने वाले effect के साथ Flip Clock plugin

  • countdown, clock आदि में उपयोग

  • कोई dependency नहीं, responsive/mobile support, तेज animation

  • server time sync

  • प्रति सेकंड कई बार बदलाव और overlap संभव

  • timer algorithm, JS setInterval drift को अपने-आप ठीक करता है

संबंधित पढ़ाई

4 टिप्पणियां

 
xguru 2020-04-16

आंतरिक रूप से tick इंजन का उपयोग करता है https://github.com/pqina/tick/

यह एक लाइब्रेरी है जो flip, digital dot शैली, number animation, line (सीधी रेखा, वृत्त), boom (आवाज़ निकालने वाला) आदि को सपोर्ट करती है।
 
kunggom 2020-04-16

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
 
kunggom 2020-04-16

अब देख रहा हूँ कि server time synchronization के लिए एक सरल correction भी शामिल है। request भेजते समय और response प्राप्त करते समय के time difference को जाँचकर, उस अंतर का आधा (= लगभग server से client तक आने में लगा समय) server से लाए गए समय में जोड़ देता है। ऐसा यथासंभव सटीक समय को synchronize करने के लिए किया गया है। लेकिन HTTP header का time value सेकंड-स्तर का होता है, इसलिए आम तौर पर इतना बड़ा time difference नहीं होगा, ऐसा भी लगता है…
 
kunggom 2022-08-17

मुझे यह बात बाद में पता चली कि सर्वर से लाए गए समय मान में round-trip time (RTT) का आधा जोड़ने वाली इस time synchronization विधि को ‘Cristian's algorithm’ कहा जाता है।

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