कैसे जावास्क्रिप्ट टाइमर काम करते हैं

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

• var id = setTimeout (fn, delay); - एक साधारण टाइमर बनाता है जो निर्दिष्ट देरी के बाद निर्दिष्ट फ़ंक्शन को कॉल करेगा। फ़ंक्शन एक अद्वितीय आईडी देता है जिसके साथ टाइमर रोका जा सकता है।
• var id = setInterval (fn, delay); - यह सेटटाइमआउट जैसा दिखता है, लेकिन यह लगातार निर्दिष्ट अंतराल पर फ़ंक्शन को कॉल करता है (जब तक कि इसे रोका नहीं जाता है)।
• clearInterval (id) ;, clearTimeout (id); - एक आईडी टाइमर (ऊपर वर्णित कार्यों में से एक द्वारा लौटाया गया) स्वीकार करता है और कॉलबैक के निष्पादन को रोकता है।

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



इस आंकड़े को जानने के लिए बहुत सारी जानकारी है, लेकिन इसे समझने से आपको इस बात की गहरी समझ हो जाएगी कि जावास्क्रिप्ट एसिंक्रोनस तरीके से कैसे निष्पादित होता है। यह आरेख लंबवत रूप से मिलीसेकंड में समय का प्रतिनिधित्व करता है, नीले ब्लॉक जावास्क्रिप्ट कोड के ब्लॉक दिखाते हैं जिन्हें निष्पादित किया गया है। उदाहरण के लिए, पहले ब्लॉक को औसतन 18ms में निष्पादित किया जाता है, एक माउस क्लिक ब्लॉक निष्पादन लगभग 11ms के लिए, आदि।

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

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

इसके अलावा, पहले जावास्क्रिप्ट ब्लॉक के निष्पादन के दौरान, एक माउस क्लिक होता है। इस अतुल्यकालिक घटना के हैंडलर (और यह अतुल्यकालिक है, क्योंकि हम इसका अनुमान नहीं लगा सकते हैं) इस समय सीधे निष्पादित नहीं किया जा सकता है, इसलिए यह टाइमर की तरह कतार में भी प्रवेश करता है।

जावास्क्रिप्ट कोड के पहले ब्लॉक को निष्पादित किए जाने के बाद, ब्राउज़र सवाल पूछता है "निष्पादन का इंतजार कर रहा है?"। इस स्थिति में, माउस क्लिक हैंडलर और टाइमर होल्ड पर है। ब्राउज़र उनमें से एक का चयन करता है (हैंडलर पर क्लिक करें) और इसे निष्पादित करता है। टाइमर निष्पादन कतार में समय के अगले उपलब्ध हिस्से की प्रतीक्षा करेगा।

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

इस प्रकार, हम मामले का निरीक्षण कर सकते हैं जब तीसरा अंतराल-कॉलबैक ऑपरेशन उस क्षण के साथ मेल खाता है जब यह पहले से ही निष्पादित हो रहा है। यह एक महत्वपूर्ण विशेषता दिखाता है: अंतराल इस बात की परवाह नहीं करता है कि वर्तमान में क्या चल रहा है, उन्हें क्रियान्वयन के बीच देरी की अवधि को ध्यान में रखे बिना कतार में जोड़ा जाएगा।

अंत में, दूसरा अंतराल-कॉलबैक पूरा होने के बाद, हम देखेंगे कि कुछ भी नहीं बचा है जिसे जावास्क्रिप्ट इंजन को निष्पादित करना चाहिए। इसका मतलब है कि ब्राउज़र फिर से नई अतुल्यकालिक घटनाओं की प्रतीक्षा कर रहा है। यह लगभग 50ms पर होगा, जहां अंतराल-कॉलबैक फिर से काम करेगा। इस समय इसे अवरुद्ध करने के लिए कुछ भी नहीं होगा, इसलिए यह तुरंत काम करेगा।

आइए एक उदाहरण देखें जो सेटटाइमआउट और सेटइंटरवल के बीच अंतर को अच्छी तरह से दिखाता है।

setTimeout(function(){ /* Some long block of code... */ setTimeout(arguments.callee, 10); }, 10); setInterval(function(){ /* Some long block of code... */ }, 10); 

ये दो विकल्प पहली नज़र में बराबर हैं, लेकिन वास्तव में यह नहीं है। सेटटाइमआउट का उपयोग करने वाले कोड में पिछली कॉल के बाद हमेशा कम से कम 10ms की देरी होगी (यह अधिक हो सकता है, लेकिन यह कभी भी कम नहीं हो सकता है), जबकि setInterval का उपयोग करने वाले कोड को हर 10ms में कॉल किया जाएगा, जब भी पिछली कॉल की गई थी।

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

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