जावास्क्रिप्ट मुख्य लूप

हम सभी ने अजाक्स और नोड के बारे में सुना है। उन्होंने न केवल शब्दावली में, बल्कि वेब डेवलपर टूलकिट में भी खुद को मजबूती से स्थापित किया है। अजाक्स - सर्वर से पेज, नोड तक डेटा के अतुल्यकालिक खींच - अतुल्यकालिक IO के साथ एक रूपरेखा। लेकिन जावास्क्रिप्ट जैसी एकल-सूत्र वाली भाषा एक ही अतुल्यकालिक को कैसे लागू करती है?

आप शायद पहले ही शीर्षक से अनुमान लगा चुके हैं, हम मुख्य लूप ("मुख्य लूप") के बारे में बात करेंगे।

विनिर्देशन के अनुसार

चलो शुरू से। हम कहते हैं "जावास्क्रिप्ट", हमारा मतलब है "ईसीएमएस्क्रिप्ट", हम कहते हैं "ईएस", हमारा मतलब है "जेएस" (जब तक, बेशक, आप मोज़िला में काम करते हैं और आपको ब्रेंडन आइच नहीं कहा जाता है)। ECMAScript विनिर्देश के साथ शुरू करना तर्कसंगत होगा।

हम ECMA-262 खोलते हैं और देखते हैं ... कि स्क्रिप्ट के काम करने के बाद उसे क्या करना है, कैसे रोकना है या कैसे रोकना है, इसके बारे में वह कुछ भी नहीं कहता है। इसका मतलब है कि यह उस पर्यावरण पर छोड़ दिया जाता है जिसमें इसे निष्पादित किया जाता है।

डब्ल्यूएसएच में यह कैसे किया जाता है

शायद सबसे सरल वातावरण विंडोज स्क्रिप्ट होस्ट, उर्फ ​​डब्ल्यूएसएच है। मैंने प्रोसेसर को 100% लोड किया, इसे अंत तक काम किया, मर गया - यह इतना सरल जीवन चक्र है। निष्पादन नियंत्रण कार्यों में से, केवल अच्छी पुरानी sleep() , जो n मिलीसेकंड के लिए दुभाषिया को रोकती है।

 WScript.echo(new Date() + ': Hello world!'); WScript.sleep(1000); WScript.echo(new Date() + ': Goodbye, cruel world!'); 

सरल कार्यों के लिए, यह पर्याप्त है, लेकिन अधिक कठिन कार्य एक बाधा कोर्स में बदल सकते हैं।

छत से एक उदाहरण: पुस्तकालय में कीबोर्ड के बिना, विंडोज 98 पर एक टर्मिनल है, लेकिन इंटरनेट एक्सप्लोरर 6 के साथ, जो पूर्ण स्क्रीन में पुस्तकों की एक सूची प्रदर्शित करता है। युवा गुंडों को IE6 को बंद करने का प्रलोभन दिया गया था, और लाइब्रेरियन के लिए इसे वापस लॉन्च करना आसान नहीं था। कैसे हो?

हम IE लॉन्च करने के लिए एक फ़ंक्शन बनाते हैं, एक पेचीदा नाम के साथ वैश्विक osprey में एक कॉलबैक बनाते हैं और इसे चलाते हैं।

 function startIE () { var ie = WScript.CreateObject("InternetExplorer.Application", "ieEvent_"); ie.Navigate("http://127.0.0.1/"); ie.Visible = true; ie.FullScreen = true; } var ieEvent_OnQuit = startIE; startIE(); 

काम नहीं करता है। अधिक सटीक रूप से, यह काम करता है, IE शुरू होता है, लेकिन दुभाषिया अंत तक पूरा होता है और चुपचाप मर जाता है। आपको उसे अनन्त नींद में भेजने की आवश्यकता है। माथे पर, sleep(Infinity) डब्ल्यूएसएच पता नहीं कैसे है, इसलिए हम 60 सेकंड के लिए पर्ची के साथ एक अंतहीन लूप करते हैं। यह इस तरह से किसी भी तरह निकलता है:

 function startIE () { var ie = WScript.CreateObject("InternetExplorer.Application", "ieEvent_"); ie.Navigate("http://127.0.0.1/"); ie.Visible = true; ie.FullScreen = true; } var ieEvent_OnQuit = startIE; startIE(); while (true){ WScript.sleep(60000); } 

अब यह काम करता है, लाइब्रेरियन खुश हैं। अपेक्षा से भी बेहतर - IE तुरंत फिर से शुरू होता है, और 0 से 59 सेकंड के समय की मनमानी राशि के बाद नहीं। यह पता चला है कि "घटना" OnQuit दुभाषिया की नींद को बाधित करता है। एक ही समय में, अगर sleep कटौती की जाती है, तो केवल एक व्यस्त लूप को छोड़कर, अन्वेषक भी ऑनक्यूइट लॉन्च करने में सक्षम नहीं होगा।

खैर, हमारे पास एक आदिम मुख्य लूप है। संक्षेप में, इसे निम्नानुसार वर्णित किया जा सकता है:

• दुभाषिया कार्यक्रम समाप्ति के साथ समाप्त नहीं होता है।
• कॉलबैक कोड केवल तब काम कर सकता है जब दुभाषिया कुछ नहीं करता है। कोड के दो टुकड़े एक ही समय में काम नहीं कर सकते हैं।

यह ब्राउज़रों में कैसे किया जाता है

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

सिद्धांत सरल है: एक कतार है, और कोई भी कोड जो निष्पादित करना चाहता है वह इसमें बन जाता है। यदि कतार खाली नहीं है, तो दुभाषिया इसमें से पहला तत्व काटता है और इसे निष्पादित करता है। यदि कतार खाली है, तो यह तब तक इंतजार करता है जब तक कि इसमें कुछ नहीं हो जाता।

कतार में इस तरह के "कोड के टुकड़े" कुछ भी हो सकते हैं: पृष्ठ पर एम्बेडेड और लिंक्ड स्क्रिप्ट, इंटरफ़ेस इवेंट ( onclick , onmouseover , ...), टाइमर कॉलबैक ( xhr.onreadystatechange ) या ब्राउज़र ऑब्जेक्ट ( xhr.onreadystatechange )। एक तरह से, ब्राउज़र-आधारित जेएस में टाइमर और घटनाओं के बीच कोई अंतर नहीं है।

खैर, अब क्रम में।

चेतावनी

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

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

setTimeout, setInterval

ब्राउज़र-आधारित जेएस में कोई sleep समारोह नहीं है - दुभाषिया कभी भी बंद नहीं होता है ( alert और इस तरह को छोड़कर)। लेकिन आप setTimeout फ़ंक्शन का उपयोग करके फ़ंक्शन के "पूरी तरह से" निष्पादन में देरी कर सकते हैं।

वाक्य रचना सरल और संक्षिप्त है: setTimeout(fn, timeout) । fn फ़ंक्शन को मिलीसेकंड के timeout बाद पहले लॉन्च किया जाएगा। पहले ही क्यों नहीं , लेकिन बिल्कुल नहीं? हुड के नीचे एक नज़र डालें।

setTimeout कॉल एक नए टाइमर को पंजीकृत करता है (वैसे, इसके पहचानकर्ता और यह फ़ंक्शन कॉल किया जाता है)। जब इसका समय समाप्त हो जाता है, और यह पता चलता है कि दुभाषिया इस समय किसी भी कोड को निष्पादित करने में व्यस्त नहीं है, तो फ़ंक्शन fn तुरंत बुलाया fn , यह एक तुच्छ मामला है।

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

setTimeout टाइमर के setTimeout आउट होने के बाद, इसे हटा दिया जाता है। यही है, setTimeout दो बार फायर नहीं करता है।

खैर, और कुछ उदाहरण कोड:

 console.log('script started'); setTimeout(function(){ console.log('timed out function'); }, 5); var endDate = +new Date() + 10; while (+new Date() < endDate){ // busy loop for 10 ms } console.log('script finished'); 

कंसोल प्रदर्शित करेगा:

  स्क्रिप्ट शुरू हुई
 स्क्रिप्ट खत्म हो गई
 समारोह का समय समाप्त 

उस क्रम में। इस तथ्य के बावजूद कि टाइमर 5 मिलीसेकंड के बाद समाप्त हो गया था, उस समय इंजन संदर्भ के साथ तारीख की तुलना करने के सुपर महत्वपूर्ण कार्य को संभाल रहा था। इसलिए, विलंबित फ़ंक्शन को समाप्त होने तक एक और 5 मिली सेकंड इंतजार करना पड़ा। यहाँ। यह शायद सबसे महत्वपूर्ण है।

आप clearTimeout(timeoutId) फ़ंक्शन के साथ किसी भी समय टाइमर को रद्द कर सकते हैं। यदि टाइमर ने पहले ही गोली मार दी है, तो इसे रद्द करें, सामान्य तौर पर, पहले से ही व्यर्थ है, लेकिन इसे त्रुटि नहीं माना जाता है।

क्या हमारे पास टाइमर को रद्द करने का समय है?

 var timeoutId; setTimeout(function(){ console.log('timed out function'); clearTimeout(timeoutId); }, 5); timeoutId = setTimeout(function(){ console.log('timed out function 2'); }, 5); var endDate = +new Date() + 10; while (+new Date() < endDate){ // busy loop for 10 ms } 

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

setInterval इसमें setInterval भिन्न होता है, निष्पादन टाइमर के लिए एक तत्व उत्पन्न करने के बाद इसके टाइमर को हटाया नहीं जाता है। इसके बजाय, इसका मूल्य इसके मूल मूल्य पर रीसेट है। इस तरह आप setTimeout अंदर समय-समय पर कॉल किए बिना फ़ंक्शन को कॉल कर सकते हैं।

कृपया ध्यान दें कि टाइमर चालू होने पर setInterval टाइमर काउंटर रीसेट नहीं किया जाता है, लेकिन केवल जब मुख्य लूप कतार खाली होती है। इसके कारण, यह समय के साथ "फिसल" सकता है।


बाकी वही है। केवल अंतराल किसी अन्य फ़ंक्शन द्वारा ओवरराइड किए जाते हैं, clearInterval ।

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

<Script>

सभी स्क्रिप्ट मुख्य लूप कतार में आते हैं। एक ओर, यह async और defer के उपयोग की अनुमति देता है। दूसरी ओर, और इन विशेषताओं के बिना, यह अप्रत्याशित परिणाम पैदा कर सकता है।

क्या होगा यदि पृष्ठ में दो स्क्रिप्ट्स एम्बेडेड हैं, और पहले एक 4 मिलीसेकंड का टाइमआउट सेट करता है, और फिर यह 10 मिलीसेकंड धीमा हो जाता है। टाइमआउट कॉलबैक कब काम करेगा - दूसरी स्क्रिप्ट से पहले, या उसके बाद?


फ़ायरफ़ॉक्स, क्रोम, और IE10 दूसरी स्क्रिप्ट के बाद टाइमआउट होगा। ओपेरा - दूसरी स्क्रिप्ट से पहले।

और अगर दूसरी स्क्रिप्ट एम्बेडेड नहीं है, इनलाइन, लेकिन बाहरी?


और यहां सभी स्क्रिप्ट दूसरी स्क्रिप्ट से पहले टाइमआउट होने की संभावना है। इस ज्ञान से, अकादमिक महत्व के अलावा, क्या अच्छा है? अनुरोधों की संख्या को कम करने के लिए, अक्सर कई लिपियों को एक में चिपका दिया जाता है। और परिणामी स्क्रिप्ट मूल लोगों की तुलना में अलग तरह से काम कर सकती है।

घटनाओं

यह अलग से यूजर इंटरफेस इवेंट्स और DOM चेंज इवेंट्स ( onDOMNodeInsertedIntoDocument और onDOMNodeInsertedIntoDocument ) पर विचार करने योग्य है।

जब कोई DOM ट्री बदलता है तो मुख्य लूप में नहीं आते हैं। इसके बजाय, वे पेड़ को बदलने के तुरंत बाद काम करते हैं।

 var i = 0; document.body.addEventListener('DOMSubtreeModified', function(e){ i = 42; }, false); console.log('i = ' + i); // i = 0; document.body.appendChild(document.createElement('div')) console.log('i = ' + i); // i = 42; 

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

आइए हम माउस-कीबोर्ड-टैचेविम की घटनाओं पर लौटते हैं। इस तरह की प्रत्येक घटना में एक डिफ़ॉल्ट कार्रवाई होती है। उदाहरण के लिए, mousedown ईवेंट पर एक बटन के लिए डिफ़ॉल्ट कार्रवाई एक उदास दृश्य प्राप्त करना है। और click के लिंक के लिए - पते पर जाएं। कुछ डिफ़ॉल्ट क्रियाओं को प्रसंस्करण फ़ंक्शन में पहले तर्क preventDefault preventDefault विधि preventDefault कॉल करके पूर्ववत किया जा सकता है।

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

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

अनुक्रम "पहले हैंडलर, फिर डिफ़ॉल्ट कार्रवाई" अभी भी विहित मामले का अनुसरण करता है जब keypress इवेंट को इनपुट क्षेत्र में पाठ की लंबाई निर्धारित करने की keypress होती है, लेकिन यह पता चलता है कि यह वास्तविक से मेल नहीं खाता है। इस समस्या का समाधान मैं पाठक पर छोड़ता हूं।

WebWorkers

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

WebWorker संदेशों के माध्यम से विशेष रूप से अपनी "कोर" प्रक्रिया के साथ संचार करता है। इसके अलावा, जब एक वॉकर से एक संदेश मुख्य प्रक्रिया में आता है, तो यह हो जाता है - हाँ, हाँ - उसी कतार में जो सब कुछ है।

सामान्य तौर पर, अगर आपको क्लाइंट पर xm से wav उत्पन्न करने की आवश्यकता है या एक मल्टी-मेगाबाइट bzip को अनज़िप करें, और ब्राउज़र WebWorkers का समर्थन करता है, तो उनका उपयोग करें।

यह नोड.जेएस में कैसे किया जाता है

यह खंड बहुत छोटा होगा, क्योंकि नोड बहुत ही समान ब्राउज़र मॉडल का उपयोग करता है। समान setTimeout और setInterval , और फ़ाइल सिस्टम और अन्य IO की घटनाएं ब्राउज़र की घटनाओं के समान हैं, सिवाय इसके कि तर्क अलग हैं।

सुविधाओं में से, फ़ंक्शन process.nextTick ध्यान दिया जा सकता है, यह setTimeout(…, 0) तरह काम करता है, लेकिन किसी भी टाइमर को अनावश्यक नहीं बनाता है। नोड.जेएस टाइमर में पहचानकर्ता एक पूर्णांक नहीं है, जैसा कि ब्राउज़रों में, लेकिन एक वस्तु। खैर, नोड 4 मिलीसेकंड सीमा को पूरी तरह से अनदेखा करता है।

एक निष्कर्ष के बजाय

उपरोक्त सभी को सारांशित करें: समझें कि मुख्य चक्र कैसे काम करता है और इसे लंबे समय तक विलंब न करने का प्रयास करें।

आगे पढ़ने / देखने के लिए:

• W3C विशिष्टता
• ड्राफ्ट WHATWG
• javascript.ru पर setTimeout और setInterval
• डगलस क्रॉकफोर्ड व्याख्यान