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

इससे पहले कि मैं अपने विचार स्पष्ट करना शुरू करूं, मेरे पास आपके लिए एक प्रश्न है: क्या आप गलत समय देने वाली घड़ी का उपयोग कर सकते हैं?

यदि आपका उत्तर हाँ है, तो मुझे आपका कीमती समय बर्बाद करने के लिए खेद है क्योंकि यह लेख आपका नहीं है।

दूसरी ओर, यदि आपका उत्तर नकारात्मक है, तो मैं समझाऊंगा कि सेटटाइमआउट या सेटइंटरवल का उपयोग करना समय जानने के लिए क्षतिग्रस्त घड़ी का उपयोग करने जैसा क्यों है।

इन कार्यों के साथ समस्या

शुरू करने के लिए, आइए निम्नलिखित स्निपेट पर विचार करें

 function test() {
   let i = 0;
   setTimeout(() => console.log("hello"), 0);
   while (i 


यदि आप इस स्निपेट को अपने ब्राउज़र कंसोल में चलाते हैं, तो आपको निम्नलिखित परिणाम प्राप्त होंगे 



यह व्यवहार इस तथ्य के कारण है कि सेटटाइमआउट ब्राउज़र की कतार में कॉलबैक जोड़ रहा है ताकि इसे निष्क्रिय होने पर इसे संसाधित करना चाहिए (करने के लिए कोई कार्य नहीं है) दूसरे शब्दों में कॉलबैक सेटटाइमआउट को पास करने की प्राथमिकता कम है

अब, यह जानते हुए, मुझे लगता है कि आपके लिए सेटटाइमआउट फ़ंक्शन का उपयोग करके टाइमर लागू करना कठिन होगा क्योंकि आपके पास एक ही समय में 2 या 10 टिक भी हो सकते हैं (यह इस पर निर्भर करता है कि आपका ब्राउज़र कितना व्यस्त है)। इसे डीबग करना एक दुःस्वप्न होगा, लेकिन क्या हमारे पास कोई बेहतर समाधान है?

  
  
  इन कार्यों से बचने का एक तरीका


टाइमर लागू करने का बेहतर तरीका प्रदान करने के लिए, हमें requestAnimationFrame फ़ंक्शन का उपयोग करना चाहिए क्योंकि यह ब्राउज़र को अगले पेंट से पहले कॉलबैक निष्पादित करने के लिए कहता है (दूसरे शब्दों में यूआई में कोई भी बदलाव होने से पहले)

यहाँ अंतर बहुत सूक्ष्म है, इसलिए इसे कोड के माध्यम से समझना बेहतर है। आइए अपने पिछले स्निपेट को वापस लें और सेटटाइमआउट और रिक्वेस्टएनिमेशनफ़्रेम की तुलना करने के लिए इसमें थोड़ा बदलाव करें

function testWithAnimationFrame() {
  let i = 0;
  setTimeout(() => console.log("hello"), 0);
  requestAnimationFrame(() => console.log("tell me the next paint"));
  while (i 


इस उदाहरण में, हम देख सकते हैं कि क्रोम पर चलते समय, सेटटाइमआउट requestAnimationFrame  से पहले चलता है (हालांकि कुछ दुर्लभ मामलों में इसका उलटा होता है)



लेकिन यदि आप इसे फ़ायरफ़ॉक्स पर चलाते हैं, तो यह आउटपुट होगा



यह भ्रामक लग सकता है लेकिन यदि आप थोड़ा ध्यान देंगे, तो आपको पता चलेगा कि निष्पादन के दौरान कोई पेंटिंग नहीं हो रही है, इसलिए इस परिदृश्य को कैसे संभाला जाता है यह ब्राउज़र पर निर्भर करता है।

अब अगर हम ब्राउज़र को पेज को दोबारा रंगने के लिए अपने स्निपेट में बदलाव कर सकें, तो देखते हैं क्या होगा

function testWithAnimationFrame2() {
  let i = 0;
  setTimeout(() => console.log("hello"), 0);
  requestAnimationFrame(() => console.log("tell me the next paint"));
  while (i 


यहाँ Chrome पर आउटपुट है



और यहां फ़ायरफ़ॉक्स में आउटपुट है



जैसा कि आप लॉग में देख सकते हैं, जब ब्राउज़र यूआई में बदलाव करता है, तो requestAnimationFrame फ़ंक्शन को हमेशा अन्य शेड्यूल किए गए कॉलबैक पर प्राथमिकता मिलेगी।

क्योंकि वेब पर, हम लगातार रीपेंटिंग कर रहे हैं, टाइमर लागू करने के लिए requestAnimationFrame एक स्पष्ट विकल्प है।

  
  
  requestAnimationFrame फ़ंक्शन को समझना


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

फ़ंक्शन अनुरोध के पहचानकर्ता का प्रतिनिधित्व करने वाला एक पूर्णांक लौटाएगा, यदि आप cancelAnimationFrame फ़ंक्शन के साथ अनुरोध को रद्द करना चाहते हैं तो यह उपयोगी हो सकता है।

  
  
  जावास्क्रिप्ट में स्टॉपवॉच का एक सरल कार्यान्वयन


स्टॉपवॉच लागू करने के लिए, कुछ आवश्यकताएं हैं:

• हमें पता होना चाहिए कि कितने समय के बाद इसे टिक करना चाहिए (आम तौर पर एक सेकंड)
• हमें समय की देरी का पता होना चाहिए जिसके बाद स्टॉपवॉच टिक करना बंद कर देगी
• टिकिंग अंतराल विलंब से कम होना चाहिए

इन सभी आवश्यकताओं को ध्यान में रखते हुए, निम्नलिखित कोड स्निपेट आपके लिए एक स्टॉपवॉच बनाएगा

किया

मुझे पता है कि इसे काफी देर तक पढ़ा गया होगा लेकिन विश्वास है कि आपने इसका आनंद लिया है। वैसे भी, यदि आपके कोई प्रश्न हैं या आपके पास कोई सुझाव है, तो बेझिझक मुझसे संपर्क करें।

इसे पढ़ने के लिए धन्यवाद और अलविदा?