🔧 🎹 🤸🏼 जावास्क्रिप्ट और अधिक: ब्राउज़रों में समय को मापने के लिए 4 रचनात्मक दृष्टिकोण 🔏 🐚 👨🏼‍🔬

लेख के लेखक, जिसका अनुवाद आज हम प्रकाशित कर रहे हैं, ने ब्राउज़रों में समय को मापने के कई असामान्य तरीकों के बारे में बात करने का फैसला किया। उनका उपयोग करने के लिए, आपको विभिन्न APIs तक पहुंच की आवश्यकता होगी जो वेब विकास में उपयोग किए जाते हैं, इसलिए वे Node.js प्लेटफ़ॉर्म के लिए उपयुक्त नहीं हैं। सच है, अगर किसी को Node.js में समय को मापने के असामान्य तरीके की आवश्यकता होती है, तो, हम मानते हैं, इस सामग्री को पढ़ने के बाद इस विषय पर उनके कुछ विचार हो सकते हैं।

एक वेब वर्कर (सेवा कार्यकर्ता में नहीं) में एक अनंत तुल्यकालिक लूप का उपयोग करना

चूंकि वेब कर्मचारी अनिवार्य रूप से एक वेब ब्राउज़र में चलने वाले थ्रेड हैं, इसलिए वे मुख्य थ्रेड को अवरुद्ध किए बिना अंतहीन छोरों को चला सकते हैं। यह आपको समय की अवधि के साथ काम करने की अनुमति देता है, जिसकी अवधि एक मिलीसेकंड से कम है। यह सटीकता उन मामलों के लिए विशेष रूप से उपयुक्त है जब एक कार्यकर्ता को निर्णय लेने की आवश्यकता होती है जो अत्यधिक समय-निर्भर होते हैं। ये निर्णय मुख्य धारा के लिए (सटीकता के बहुत उच्च स्तर के साथ) किए जा सकते हैं। उदाहरण के लिए, आप मामले में कुछ प्राप्त कर सकते हैं जब एक निश्चित घटना के बाद से पारित माइक्रोसेकंड की संख्या एक अभाज्य संख्या द्वारा दर्शाई जाती है। समय के साथ माइक्रोसेकंड सटीकता के साथ काम करने के लिए, आप प्रदर्शन का उपयोग कर सकते हैं । विधि ।

▍Advantages

प्राप्त सटीकता माइक्रोसेकंड में व्यक्त की है।
.
, , . - .
. , setInterval, terminate , . MDN : « terminate() Worker . , ».

▍

भले ही यह विधि समय अंतराल के साथ काम करना संभव बनाती है जो कि एक मिलीसेकंड से कम है, मुख्य धागे को संदेश भेजना असिंक्रोनस रूप से काम करता है। यही है, मुख्य धारा में उसी सटीकता के साथ कुछ क्रियाएं करना असंभव है, जिसके साथ कार्यकर्ता में निर्णय लिया जाता है कि इन कार्यों को करने की आवश्यकता है।
यह विधि पूरी तरह से स्ट्रीम को लोड करती है, जिससे फोन पर बैटरी की खपत बढ़ सकती है।
इस विधि के लिए वेब कर्मचारियों के समर्थन की आवश्यकता होती है।
एक वेब कर्मचारी में एक अनन्त लूप विराम नहीं देता है, यदि इसके साथ जुड़ा टैब निष्क्रिय है।

→ कोडैंडबॉक्स पर उदाहरण

समय से संबंधित घटनाओं के लिए सीएसएस एनिमेशन का उपयोग करना (विशेष रूप से - एनिमेशन)

इस पद्धति में अंतहीन एनीमेशन के साथ एक तत्व बनाना शामिल है। यहां आप तत्व का उपयोग करने का प्रयास कर सकते हैं div, लेकिन मुझे यह कहना होगा कि, जैसा कि इस पद्धति की कमियों की सूची के पैरा 2 में बताया गया है, divइन उद्देश्यों के लिए तत्वों का उपयोग नहीं करना बेहतर है। इसलिए, यदि हमारे पास अंतहीन एनीमेशन वाला एक तत्व है, तो हम इसके घटना के लिए सदस्यता ले सकते हैं animationiterationऔर अंतराल समाप्त होने पर क्षणों पर सूचनाएं प्राप्त कर सकते हैं animation-duration।

▍Advantages

यदि ब्राउज़र टैब निष्क्रिय हो जाता है, तो स्वचालित रूप से विराम दें। इस मामले में, हमारे लिए ब्याज की घटना बस नहीं होती है। इसलिए, आपको कई घटनाओं को संसाधित करने की समस्या को हल करने के बारे में चिंता करने की आवश्यकता नहीं है जो उस समय के दौरान जमा हुई हैं जब टैब निष्क्रिय था और फिर सक्रिय हो गया था।
div DOM. , React-, , . div .

, , . — :

.addEventListener("animationiteration", fun).

animation-delay.

▍

. , , .
DOM और CSSOM पर निर्भरता। अन्य सीएसएस नियम एनीमेशन का वर्णन करने वालों को प्रभावित कर सकते हैं। इसलिए, मैं आपको सलाह देता हूं कि टाइमर के संगठन के लिए एक तरह का बेतरतीब ढंग से पहले से नामांकित टैग की तरह बनाया जाए <just-a-timer-element></<just-a-timer-element>। शायद - क्या यह एक कस्टम तत्व बनाने के लायक है, जिसके अंदर सीएसएस एनीमेशन कोड बड़े करीने से छिपा हुआ है? (ये सभी वास्तव में विवादास्पद विचार हैं)।
यदि तत्व में कोई शैली है, तो यह विधि काम नहीं करती है display: none;।
अशुद्धि। मेरे परीक्षणों के अनुसार, उलटी गिनती की सटीकता लगभग 1 एमएस हो सकती है। आप, यह पता लगाने के लिए कि यह आपके लिए कैसे काम करता है, एक उदाहरण के साथ प्रयोग कर सकता है, जिसका लिंक नीचे दिया गया है।

→ कोडैंडबॉक्स पर उदाहरण

Svg टैग (SMIL एनिमेशन) का उपयोग करना

निम्नलिखित एसवीजी तत्व पर एक नज़र डालें:

<svg>
  <rect>
    <animate
      attributeName="rx"
      values="0;1"
      dur="1s"
      repeatCount="indefinite"
    />
  </rect>
</svg>

यदि आप निम्नलिखित कोड का उपयोग करते हैं :, animate.addEventListener('repeat', fun)तो फ़ंक्शन funको हर durसेकंड कहा जाएगा । हमारे मामले में, हर सेकंड।

▍Advantages

यह विधि तब भी काम करती है, जब कोई शैली एसवीजी तत्व को सौंपी जाती है display: none;।
जब SVG तत्व DOM से निकाला जाता है तो काउंटडाउन अपने आप बंद हो जाता है।
जब तक पेज पूरी तरह से लोड नहीं हो जाता तब तक इवेंट जेनरेशन शुरू नहीं होता है।
यदि टैब निष्क्रिय हो जाता है तो "टाइमर" स्वचालित रूप से रोक दिया जाता है।

Ages नुकसान

जैसा कि सीएसएस एनीमेशन का उपयोग करके समय अंतराल की गिनती के मामले में, इस पद्धति का अनुप्रयोग अन्य प्रोग्रामर के लिए समझ से बाहर हो सकता है।
DOM और CSSOM पर निर्भरता। वह है - यहां हमारे पास वही अवांछनीय विशेषताएं हैं जो पहले से ही सीएसएस एनीमेशन का उपयोग करके समय गिनने की विधि के लिए वर्णित हैं। अर्थात् - अन्य सीएसएस-नियमों के कारण "टाइमर" के विघटन की संभावना।
यह IE और एज में समर्थित नहीं है (जब तक कि ब्राउज़र को Microsoft से क्रोमियम में स्थानांतरित नहीं किया जाता है)।
अशुद्धि। मेरे परीक्षणों के अनुसार, सबसे सटीक विधि से इस तरह के टाइमर का विचलन बहुत प्रभावशाली 15 मिलीसेकंड हो सकता है। आप उदाहरण के साथ प्रयोग करके इसे स्वयं सत्यापित कर सकते हैं, जिसका लिंक नीचे दिया गया है।
जब तक पेज पूरी तरह से लोड नहीं हो जाता तब तक उलटी गिनती शुरू नहीं होती है। सही है, इस पद्धति का "माइनस" कुछ स्थितियों में "प्लस" हो सकता है।

→ कोडैंडबॉक्स पर उदाहरण

वेब एनिमेशन एपीआई का उपयोग करना

वेब एनिमेशन एपीआई आपको जावास्क्रिप्ट कोड का उपयोग करके डोम तत्वों को एनिमेट करने की अनुमति देता है।

दिलचस्प बात यह है कि आप असम्बद्ध तत्वों को भी चेतन कर सकते हैं! यह आपको शुद्ध जावास्क्रिप्ट (और वेब एपीआई) में उपलब्ध समय तंत्र तक पहुंच प्रदान करता है।

यहाँ एक वैकल्पिक कार्यान्वयन है setTimeout:

function ownSetTimeout(callback, duration) {
  const div = document.createElement('div');

  const keyframes = new KeyframeEffect(div, [], { duration, iterations: 1 });

  const animation = new Animation(
    keyframes,
    document.timeline
  );

  animation.play();

  animation.addEventListener('finish', () => {
    callback();
  });
}

अच्छी तरह से, है ना?

▍Advantages

एक आत्म-निहित समाधान जिसे DOM के साथ सहभागिता की आवश्यकता नहीं है।
इस दृष्टिकोण से अपरिचित एक प्रोग्रामर आसानी से संबंधित कोड का अर्थ समझ जाएगा।
"टाइमर" एक निष्क्रिय टैब पर रुकता है।

Ages नुकसान

वेब एनिमेशन एपीआई - तकनीक अभी भी प्रायोगिक है। उत्पादन में इसका उपयोग न करें।
बहुत गरीब ब्राउज़र का समर्थन। यह विधि केवल क्रोमियम में काम करने की संभावना है।
इस समाधान के सभी फायदों के साथ, यह, फिर भी, किसी को सहज से दूर लग सकता है।
तथ्य यह है कि "टाइमर" एक निष्क्रिय टैब पर रोक दिया जाता है, अगर यह विकल्प के रूप में उपयोग किया जाता है, तो इस समाधान का एक शून्य हो सकता है setTimeout।
इस पद्धति का उपयोग अंतरालों को गिनने के लिए नहीं किया जा सकता है। केवल एक कार्यक्रम प्रोग्रामर के लिए उपलब्ध है onfinish।
कम सटीकता। मेरे प्रयोगों के अनुसार, त्रुटि आसानी से is 5 मिलीसेकंड हो सकती है।

→ कोडैंडबॉक्स पर उदाहरण

बक्शीश

समय के साथ काम करने के लिए, आप वेब ऑडियो एपीआई का उपयोग कर सकते हैं। अंतराल और देरी के साथ सटीक रूप से काम करने का यह एक और शानदार तरीका है। यहाँ इसके बारे में एक बढ़िया लेख है।

सारांश

मैं समझता हूं कि समय के साथ काम करने की तकनीकें जो मैंने यहां सूचीबद्ध की हैं, सभी से दूर हो सकती हैं। लेकिन मैं सिर्फ इस लेख को लिखने में मदद नहीं कर सकता था, क्योंकि मैंने हमेशा सोचा था कि setTimeoutऔर setInterval- ये कुछ निश्चित समय के साथ अतुल्यकालिक रूप से काम करने के एकमात्र तरीके हैं। लेकिन वास्तव में, जैसा कि यह निकला, यह सभी से बहुत दूर है। कौन जानता है, हो सकता है कि किसी विशेष परियोजना पर काम करते समय किसी को कुछ असामान्य प्रतिबंधों से निपटना पड़े, कुछ विशेष परिस्थितियों के साथ जिसमें यहां पर प्रकाश डाला गया कार्य समय के साथ उपयोगी साबित हो सकता है।

प्रिय पाठकों! आपको क्या लगता है कि यहां बताए गए समय-आधारित दृष्टिकोण आपके काम आ सकते हैं?

जावास्क्रिप्ट और अधिक: ब्राउज़रों में समय को मापने के लिए 4 रचनात्मक दृष्टिकोण

एक वेब वर्कर (सेवा कार्यकर्ता में नहीं) में एक अनंत तुल्यकालिक लूप का उपयोग करना

▍Advantages

▍

समय से संबंधित घटनाओं के लिए सीएसएस एनिमेशन का उपयोग करना (विशेष रूप से - एनिमेशन)

▍Advantages

▍

Svg टैग (SMIL एनिमेशन) का उपयोग करना

▍Advantages

Ages नुकसान

वेब एनिमेशन एपीआई का उपयोग करना

▍Advantages

Ages नुकसान

बक्शीश

सारांश

More articles: