जावास्क्रिप्ट समकालिक और अतुल्यकालिक जावास्क्रिप्ट को समझना - भाग 2

इस पोस्ट के पहले भाग में, हमने देखा कि कैसे तुल्यकालिक और अतुल्यकालिक की अवधारणाएं माना जाता है जावास्क्रिप्ट में. इस दूसरे भाग में, श्री एक्स हमें समझने में मदद करने के लिए फिर से प्रकट होता है कैसे सेट टाइमआउट और AJAX एपीआई काम.

एक अजीब अनुरोध

चलिए मिस्टर एक्स की कहानी पर वापस लौटते हैं और जिस फिल्म के लिए आप जाना चाहते हैं। कहते हैं कि आप आउटिंग से पहले मिस्टर एक्स के लिए एक कार्य छोड़ देते हैं, और उसे बताएं कि वह केवल इस कार्य पर काम शुरू कर सकता है पाँच घंटे बाद उसे आपका संदेश मिल गया.

वह इसके बारे में खुश नहीं है, याद रखें, वह तब तक एक नया संदेश नहीं लेता है जब तक कि वह वर्तमान एक के साथ नहीं किया जाता है, और यदि वह आपका लेता है, तो वह इंतजार करना पड़ता है पंज घंटे यहां तक ​​कि कार्य पर शुरू करने के लिए। तो, समय की बर्बादी नहीं करने के लिए, वह एक सहायक में लाता है, श्री एच.

इंतजार करने के बजाय, वह श्री एच से पूछता है कतार में कार्य के लिए एक नया संदेश छोड़ें दिए गए घंटों के बीत जाने के बाद, और अगले संदेश पर जाता है.

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

लेकिन श्री एच सीधे श्री एक्स से संपर्क करने के बजाय कतार में एक संदेश क्यों छोड़ते हैं? क्योंकि जैसा कि मैंने पहले भाग में उल्लेख किया है, केवल श्री एक्स से संपर्क करने का तरीका है उसे एक संदेश छोड़ कर फोन कॉल के माध्यम से - कोई अपवाद नहीं.

1. द setTimeout () तरीका

मान लीजिए आपके पास एक कोड का सेट है जिसे आप चाहते हैं एक निश्चित समय के बाद निष्पादित करें. ऐसा करने के लिए, आप बस इसे एक फंक्शन में लपेटें, तथा इसे जोड़ें setTimeout () तरीका देरी के समय के साथ। का वाक्य विन्यास setTimeout () इस प्रकार है:

 सेटटाइमआउट (कार्य, विलंब-समय, arg…) 

आर्ग ... पैरामीटर किसी भी तर्क के लिए खड़ा है जो फ़ंक्शन लेता है, और विलम्ब मिलीसेकंड में जोड़ा जाना है। नीचे आप एक साधारण कोड उदाहरण देख सकते हैं, जो आउटपुट देता है “हे” 3 सेकंड के बाद कंसोल में.

 setTimeout (फ़ंक्शन () कंसोल.लॉग ('हे'), 3000); 

एक बार setTimeout () दौड़ना शुरू करता है, कॉल स्टैक को ब्लॉक करने के बजाय संकेतित विलंब समय समाप्त होने तक, ए टाइमर चालू है, और कॉल स्टैक को धीरे-धीरे अगले संदेश के लिए खाली कर दिया जाता है (इसी तरह श्री एक्स और श्री एच के बीच पत्राचार के लिए).

जब टाइमर समाप्त हो जाता है, तो एक नया संदेश कतार में शामिल होता है, और ईवेंट लूप तब उठाता है जब कॉल स्टैक उसके पहले सभी संदेशों को संसाधित करने के बाद मुक्त होता है - इस प्रकार कोड अतुलनीय रूप से चलता है.

2. AJAX

AJAX (अतुल्यकालिक जावास्क्रिप्ट और XML) एक अवधारणा है जो इसका उपयोग करती है XMLHttpRequest (XHR) एपीआई को सर्वर अनुरोध करें तथा प्रतिक्रियाओं को संभालें.

जब ब्राउज़र XMLHttpRequest का उपयोग किए बिना सर्वर अनुरोध करते हैं, तो पृष्ठ ताज़ा तथा अपने UI को पुनः लोड करता है. जब अनुरोधों और प्रतिक्रियाओं का प्रसंस्करण XHR API द्वारा नियंत्रित किया जाता है, और यूआई अप्रभावित रहता है.

तो, मूल रूप से लक्ष्य के लिए है पृष्ठ पुनः लोड के बिना अनुरोध करें. अब, कहाँ है “अतुल्यकालिक” इसमें? XHR कोड का उपयोग करना (जो हम एक पल में देखेंगे) इसका मतलब यह नहीं है कि यह AJAX है, क्योंकि XHR एपीआई कर सकता है सिंक्रोनस और एसिंक्रोनस दोनों तरीकों से काम करते हैं.

एक्सएचआर डिफ़ॉल्ट रूप से इस पर लगा है एसिंक्रोनस रूप से काम करें; जब कोई फ़ंक्शन XHR का उपयोग करके अनुरोध करता है, तो यह प्रतिक्रिया की प्रतीक्षा किए बिना लौटता है.

यदि XHR को कॉन्फ़िगर किया गया है समकालिक होना, तब तक फ़ंक्शन प्रतीक्षा करता है प्रतिक्रिया प्राप्त और संसाधित की जाती है लौटने से पहले.

कोड उदाहरण 1

यह उदाहरण प्रस्तुत करता है XMLHttpRequest वस्तु निर्माण. खुला() विधि, अनुरोध URL को मान्य करता है, और भेजने के लिए () विधि अनुरोध भेजता है.

 var xhr = नया XMLHttpRequest (); xhr.open ("GET", url); xhr.send (); 

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

कोड उदाहरण 2

hello.txt इस उदाहरण में फ़ाइल एक साधारण पाठ फ़ाइल है जिसमें 'हैलो' पाठ है। प्रतिक्रिया XHR की संपत्ति अमान्य है, क्योंकि यह पाठ 'हैलो' का उत्पादन नहीं करती थी.

 var xhr = नया XMLHttpRequest (); xhr.open ("GET", "hello.txt"); xhr.send (); document.write (xhr.response); // खाली स्ट्रिंग 

XHR एक सूक्ष्म दिनचर्या को लागू करता है प्रतिक्रिया के लिए जाँच करता रहता है हर मिलीसेकंड में, और मानार्थ घटनाओं को ट्रिगर करता है विभिन्न राज्यों के लिए एक अनुरोध के माध्यम से चला जाता है। जब प्रतिक्रिया भरी हुई है, एक लोड घटना XHR द्वारा ट्रिगर की जाती है, जो एक मान्य प्रतिक्रिया दे सकता है.

 var xhr = नया XMLHttpRequest (); xhr.open ("GET", "hello.txt"); xhr.send (); xhr.onload = function () document.write (this.response) // डॉक्यूमेंट में 'हैलो' लिखता है 

लोड घटना के अंदर प्रतिक्रिया आउटपुट 'हैलो', सही पाठ.

एसिंक्रोनस तरीके से जाना पसंद किया जाता है, क्योंकि यह अनुरोध पूरा होने तक अन्य स्क्रिप्ट को ब्लॉक नहीं करता है.

यदि प्रतिक्रिया को समकालिक रूप से संसाधित किया जाना है, तो हम पास हो जाते हैं असत्य के अंतिम तर्क के रूप में खुला, कौन कौन से XHR API को चिह्नित करता है यह कह रहा है समकालिक होना है (डिफ़ॉल्ट रूप से अंतिम तर्क खुला है सच, जिसे आपको स्पष्ट रूप से निर्दिष्ट करने की आवश्यकता नहीं है).

 var xhr = नया XMLHttpRequest (); xhr.open ("GET", "hello.txt", false); xhr.send (); document.write (xhr.response); // दस्तावेज़ को 'हैलो' लिखता है 

यह सब क्यों सीखा?

लगभग सभी शुरुआती अतुल्यकालिक अवधारणाओं के साथ कुछ गलतियां करते हैं जैसे कि setTimeout () और AJAX, उदाहरण के लिए मानकर setTimeout () देरी समय के बाद, या एक AJAX अनुरोध करने के लिए सीधे एक फ़ंक्शन के अंदर प्रतिक्रिया संसाधित करके कोड निष्पादित करता है.

यदि आप जानते हैं कि पहेली कैसे फिट होती है, तो आप कर सकते हैं इस तरह के भ्रम से बचें. आप जानते हैं कि इसमें देरी का समय है setTimeout () समय को इंगित नहीं करता है जब कोड निष्पादन शुरू होता है, लेकिन समय जब समय समाप्त हो रहा है और एक नया संदेश कतारबद्ध है, जो केवल तभी संसाधित किया जाएगा जब कॉल स्टैक ऐसा करने के लिए स्वतंत्र हो.