किसी फ़ंक्शन के अंदर इसे संशोधित करने के बाद मेरा वेरिएबल अनलग्ड क्यों है? - एसिंक्रोनस कोड संदर्भ

669

निम्नलिखित उदाहरणों को देखते हुए, outerScopeVarसभी मामलों में अपरिभाषित क्यों है ?

var outerScopeVar;

var img = document.createElement('img');
img.onload = function() {
    outerScopeVar = this.width;
};
img.src = 'lolcat.png';
alert(outerScopeVar);

var outerScopeVar;
setTimeout(function() {
    outerScopeVar = 'Hello Asynchronous World!';
}, 0);
alert(outerScopeVar);

// Example using some jQuery
var outerScopeVar;
$.post('loldog', function(response) {
    outerScopeVar = response;
});
alert(outerScopeVar);

// Node.js example
var outerScopeVar;
fs.readFile('./catdog.html', function(err, data) {
    outerScopeVar = data;
});
console.log(outerScopeVar);

// with promises
var outerScopeVar;
myPromise.then(function (response) {
    outerScopeVar = response;
});
console.log(outerScopeVar);

// geolocation API
var outerScopeVar;
navigator.geolocation.getCurrentPosition(function (pos) {
    outerScopeVar = pos;
});
console.log(outerScopeVar);

undefinedइन सभी उदाहरणों में इसका उत्पादन क्यों होता है ? मुझे वर्कअराउंड नहीं चाहिए, मैं जानना चाहता हूं कि ऐसा क्यों हो रहा है।

नोट: यह जावास्क्रिप्ट अतुल्यकालिकता के लिए एक विहित प्रश्न है । इस प्रश्न को सुधारने और अधिक सरलीकृत उदाहरण जोड़ने के लिए स्वतंत्र महसूस करें, जिसे समुदाय पहचान सकता है।

javascript  asynchronous 
— फेब्रीसो मैटे
स्रोत
8
— डुकलिंग
@ डुकलिंग धन्यवाद, मुझे पूरा यकीन है कि मैंने उस लिंक के साथ टिप्पणी की थी लेकिन स्पष्ट रूप से कुछ गायब टिप्पणियां हैं। इसके अलावा, आपके संपादन के बारे में: मेरा मानना ​​है कि शीर्षक में "कैनोनिकल" और "एसिंक्रोनसिटी" होने से इस प्रश्न की खोज के लिए एक दुसरे प्रश्न को डुप के रूप में चिह्नित करने में मदद मिलती है। और निश्चित रूप से, यह अतुल्यकालिकता स्पष्टीकरण की तलाश में Google से इस प्रश्न को खोजने में भी मदद करता है।
— फाबेरिको मटे
3
थोड़ा और सोचा जाना, "कैनोनिकल एसिंक्रोनसिटी विषय" शीर्षक पर थोड़ा भारी है, "अतुल्यकालिक कोड संदर्भ" सरल और अधिक उद्देश्य है। मेरा मानना ​​है कि ज्यादातर लोग "एसिंक्रोनस" के बजाय "एसिंक्रोनस" की खोज करते हैं।
— फेबेरिसो मैटे
1
कुछ लोग फ़ंक्शन कॉल से पहले अपने चर को इनिशियलाइज़ करते हैं। कैसे शीर्षक बदलने के बारे में जो किसी भी तरह का प्रतिनिधित्व करता है? जैसे " किसी फ़ंक्शन के अंदर इसे संशोधित करने के बाद मेरा वेरिएबल अनलग्ड क्यों है ?" ?
— फेलिक्स क्लिंग
सभी कोड उदाहरणों में जो आपने ऊपर उल्लेख किया है, "चेतावनी (आउटरस्कोपवर);" अभी क्रियान्वित करता है, जबकि "आउटरस्कोपवार" के मान को निर्दिष्ट करते हुए लेटर (एसिंक्रोनसली) होता है।
— रिफ्लेक्टर

जवाबों:

542

एक शब्द का जवाब: अतुल्यकालिकता ।

भूमिकाएँ

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

सवाल का जवाब हाथ में

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

अब सवाल यह है कि उस कॉलबैक को कब कहा जाता है?

यह केस पर निर्भर करता है। आइए फिर से कुछ सामान्य व्यवहार का पता लगाने की कोशिश करें:

  • img.onloadभविष्य में कुछ समय के लिए कहा जा सकता है , जब (और यदि) छवि सफलतापूर्वक लोड हो गई है।
  • setTimeoutविलंब समाप्त होने के बाद और समय समाप्त होने के बाद रद्द नहीं किया गया है, भविष्य में कुछ समय कहा जा सकता है clearTimeout। नोट: 0विलंब के रूप में उपयोग करने पर भी , सभी ब्राउज़रों में न्यूनतम टाइमआउट विलंब कैप (HTML5 युक्ति में 4ms होना निर्दिष्ट है)।
  • jQuery $.postके कॉलबैक को भविष्य में , (और यदि) Ajax के अनुरोध को सफलतापूर्वक पूरा किया जा सकता है।
  • Node.js को भविष्य में कभीfs.readFile भी कॉल किया जा सकता है , जब फ़ाइल को सफलतापूर्वक पढ़ा गया हो या किसी त्रुटि को फेंक दिया गया हो।

सभी मामलों में, हमारे पास एक कॉलबैक है जो भविष्य में कभी भी चल सकता है । यह "भविष्य में कुछ समय" है जिसे हम अतुल्यकालिक प्रवाह के रूप में संदर्भित करते हैं ।

अतुल्यकालिक निष्पादन को तुल्यकालिक प्रवाह से बाहर धकेल दिया जाता है। अर्थात, एसिंक्रोनस कोड कभी भी निष्पादित नहीं करेगा जबकि सिंक्रोनस कोड स्टैक निष्पादित हो रहा है। यह जावास्क्रिप्ट के एकल-पिरोया जाने का अर्थ है।

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

अर्थात्, हाथ से तैयार लाल आकृतियों में हाइलाइट किया गया एसिंक्रोनस कोड अपने संबंधित कोड ब्लॉक में सभी शेष सिंक्रोनस कोड निष्पादित होने के बाद ही निष्पादित हो सकता है:

async कोड हाइलाइट किया गया

संक्षेप में, कॉलबैक फ़ंक्शंस को सिंक्रोनाइज़ किया जाता है लेकिन एसिंक्रोनस रूप से निष्पादित किया जाता है। आप बस एक अतुल्यकालिक फ़ंक्शन के निष्पादन पर भरोसा नहीं कर सकते हैं जब तक कि आप यह नहीं जानते कि इसे निष्पादित किया गया है, और यह कैसे करना है?

यह वास्तव में सरल है। तर्क जो अतुल्यकालिक फ़ंक्शन निष्पादन पर निर्भर करता है, उसे इस अतुल्यकालिक फ़ंक्शन के अंदर से शुरू / बुलाया जाना चाहिए। उदाहरण के लिए, कॉलबैक फ़ंक्शन के अंदर भी alerts और console.logs को ले जाना अपेक्षित परिणाम का उत्पादन करेगा, क्योंकि परिणाम उस बिंदु पर उपलब्ध है।

अपने स्वयं के कॉलबैक तर्क को लागू करना

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

var outerScopeVar;
helloCatAsync();
alert(outerScopeVar);

function helloCatAsync() {
    setTimeout(function() {
        outerScopeVar = 'Nya';
    }, Math.random() * 2000);
}

नोट: मैं setTimeoutजेनेरिक एसिंक्रोनस फ़ंक्शन के रूप में एक यादृच्छिक देरी के साथ उपयोग कर रहा हूं , वही उदाहरण अजाक्स readFile, onloadऔर किसी अन्य एसिंक्रोनस प्रवाह पर लागू होता है ।

यह उदाहरण स्पष्ट रूप से अन्य उदाहरणों के समान मुद्दे से ग्रस्त है, यह तब तक इंतजार नहीं कर रहा है जब तक अतुल्यकालिक फ़ंक्शन निष्पादित नहीं होता है।

आइए इससे निपटने के लिए अपने स्वयं के कॉलबैक सिस्टम को लागू करें। सबसे पहले, हम उस बदसूरत से छुटकारा पा लेते हैं outerScopeVarजो इस मामले में पूरी तरह से बेकार है। फिर हम एक पैरामीटर जोड़ते हैं जो एक फ़ंक्शन तर्क को स्वीकार करता है, हमारा कॉलबैक। जब एसिंक्रोनस ऑपरेशन खत्म हो जाता है, तो हम इस कॉलबैक को परिणाम पास करते हैं। कार्यान्वयन (कृपया टिप्पणियों को क्रम में पढ़ें):

// 1. Call helloCatAsync passing a callback function,
//    which will be called receiving the result from the async operation
helloCatAsync(function(result) {
    // 5. Received the result from the async function,
    //    now do whatever you want with it:
    alert(result);
});

// 2. The "callback" parameter is a reference to the function which
//    was passed as argument from the helloCatAsync call
function helloCatAsync(callback) {
    // 3. Start async operation:
    setTimeout(function() {
        // 4. Finished async operation,
        //    call the callback passing the result as argument
        callback('Nya');
    }, Math.random() * 2000);
}

उपरोक्त उदाहरण का कोड स्निपेट:

// 1. Call helloCatAsync passing a callback function,
//    which will be called receiving the result from the async operation
console.log("1. function called...")
helloCatAsync(function(result) {
    // 5. Received the result from the async function,
    //    now do whatever you want with it:
    console.log("5. result is: ", result);
});

// 2. The "callback" parameter is a reference to the function which
//    was passed as argument from the helloCatAsync call
function helloCatAsync(callback) {
    console.log("2. callback here is the function passed as argument above...")
    // 3. Start async operation:
    setTimeout(function() {
    console.log("3. start async operation...")
    console.log("4. finished async operation, calling the callback, passing the result...")
        // 4. Finished async operation,
        //    call the callback passing the result as argument
        callback('Nya');
    }, Math.random() * 2000);
}
स्निपेट का विस्तार करें

ज्यादातर वास्तविक उपयोग के मामलों में, DOM API और अधिकांश लाइब्रेरी पहले से ही कॉलबैक कार्यक्षमता ( helloCatAsyncइस प्रदर्शनकारी उदाहरण में कार्यान्वयन) प्रदान करते हैं। आपको केवल कॉलबैक फ़ंक्शन को पास करना होगा और यह समझना होगा कि यह समकालिक प्रवाह से बाहर निकल जाएगा, और इसके लिए आपके कोड को फिर से व्यवस्थित करेगा।

आप यह भी देखेंगे कि अतुल्यकालिक प्रकृति के कारण, returnअतुल्यकालिक प्रवाह से वापस तुल्यकालिक प्रवाह के लिए एक मूल्य के लिए असंभव है जहां कॉलबैक को परिभाषित किया गया था, क्योंकि अतुल्यकालिक कॉलबैक को तब निष्पादित किया जाता है जब सिंक्रोनस कोड पहले से ही निष्पादित करना समाप्त कर देता है।

returnएक अतुल्यकालिक कॉलबैक से मूल्य के बजाय , आपको कॉलबैक पैटर्न का उपयोग करना होगा, या ... वादे।

वादे

यद्यपि वेनिला जेएस के साथ कॉलबैक नरक को दूर रखने के तरीके हैं , वादे लोकप्रियता में बढ़ रहे हैं और वर्तमान में ईएस 6 में मानकीकृत किए जा रहे हैं ( वादा - एमडीएन देखें )।

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

जावास्क्रिप्ट अतुल्यकालिकता के बारे में अधिक पढ़ने की सामग्री

  • नोड की कला - कॉलबैक एसिंक्रोनस कोड और कॉलबैक को वैनिला जेएस उदाहरणों और नोड कोड के साथ बहुत अच्छी तरह से समझाता है।

नोट: मैंने इस उत्तर को समुदाय विकी के रूप में चिह्नित किया है, इसलिए कम से कम 100 प्रतिष्ठा वाले कोई भी व्यक्ति इसे संपादित और सुधार सकता है! कृपया इस उत्तर को बेहतर बनाने के लिए स्वतंत्र महसूस करें, या यदि आप चाहें तो एक नया उत्तर प्रस्तुत करें।

मैं इस सवाल को एक अतुल्यकालिक मुद्दों का जवाब देने के लिए एक विहित विषय में बदलना चाहता हूं जो अजाक्स से असंबंधित है ( एक AJAX कॉल से प्रतिक्रिया कैसे लौटाएं? उसके लिए), इसलिए इस विषय को आपकी मदद करने के लिए जितना संभव हो उतना अच्छा और उपयोगी होना चाहिए? !

— फैब्रिसियो मैट
स्रोत
1
आपके अंतिम उदाहरण में, क्या कोई विशिष्ट कारण है कि आप अनाम फ़ंक्शंस का उपयोग करते हैं या नामांकित फ़ंक्शंस का उपयोग करके यह काम करेगा?
— JDelage
1
कोड उदाहरण थोड़ा अजीब हैं क्योंकि आप इसे कॉल करने के बाद फ़ंक्शन की घोषणा कर रहे हैं। पाठ्यक्रम के उत्थापन के कारण काम करता है, लेकिन क्या यह जानबूझकर किया गया था?
— बरगी
2
क्या यह गतिरोध है felix kling आपके उत्तर की ओर इशारा कर रही है और आप felix उत्तर की ओर इशारा कर रहे हैं
— माही
1
आपको यह समझने की आवश्यकता है कि लाल वृत्त कोड केवल async है क्योंकि इसे NATIVE async जावास्क्रिप्ट फ़ंक्शंस द्वारा निष्पादित किया जा रहा है। यह आपके जावास्क्रिप्ट इंजन की एक विशेषता है - चाहे वह Node.js हो या एक ब्राउज़र। यह async है क्योंकि यह एक फ़ंक्शन को "कॉलबैक" के रूप में पारित किया जा रहा है जो अनिवार्य रूप से एक ब्लैक बॉक्स (C आदि में लागू किया गया है)। असहाय डेवलपर के लिए वे async हैं ... सिर्फ इसलिए। यदि आप अपना स्वयं का एसिंक्स फ़ंक्शन लिखना चाहते हैं, तो आपको इसे सेटटाइमआउट (myfunc, 0) में भेजकर इसे हैक करना होगा। क्या आपको ऐसा करना चाहिए? एक और बहस .... शायद नहीं।
— सीन एंडरसन
@ फ़ाइब्रियो मैंने "> = 4ms क्लैंप" को परिभाषित करने वाली युक्ति की तलाश की है, लेकिन यह नहीं मिल सका - मुझे एमडीएन पर इसी तरह के तंत्र (नेस्टेड कॉल के लिए क्लैंपिंग) का कुछ उल्लेख मिला - developer.mozilla.org/en-US-docs / वेब / एपीआई /… - क्या किसी के पास एचटीएमएल कल्पना के दाहिने हिस्से का लिंक है।
— सेबी
147

Fabrício का जवाब हाजिर है; लेकिन मैं उनके जवाब को कुछ कम तकनीकी के साथ पूरक करना चाहता था, जो एसिंक्रोनसिटी की अवधारणा को समझाने में मदद करने के लिए एक सादृश्य पर ध्यान केंद्रित करता है ।

एक सादृश्य ...

कल, मैं जो काम कर रहा था वह एक सहयोगी से कुछ जानकारी के लिए आवश्यक था। मैंने उसे ऊपर उठाया; यहाँ बातचीत कैसे हुई:

मेरे : हाय बॉब, मुझे पता है कि कैसे हम जरूरत foo 'd बार पिछले सप्ताह डी'। जिम इस पर एक रिपोर्ट चाहते हैं, और आप केवल एक ही हैं जो इसके बारे में विवरण जानते हैं।

बॉब : ज़रूर बात है, लेकिन मुझे लगभग 30 मिनट लगेंगे?

मैं : यह बहुत अच्छा है बॉब। जब आपको जानकारी मिली हो तो मुझे एक अंगूठी वापस दें!

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

कल्पना करें कि क्या बातचीत इसके बजाय इस तरह से चली गई थी;

मेरे : हाय बॉब, मुझे पता है कि कैसे हम जरूरत foo 'd बार पिछले सप्ताह डी'। जिम उस पर एक रिपोर्ट चाहते हैं, और आप केवल एक ही हैं जो इसके बारे में विवरण जानते हैं।

बॉब : ज़रूर बात है, लेकिन मुझे लगभग 30 मिनट लगेंगे?

मैं : यह बहुत अच्छा है बॉब। मैं इंतजार करूँगा।

और मैं वहीं बैठ कर इंतजार करने लगा। और इंतजार किया। और इंतजार किया। 40 मिनट के लिए। इंतजार करने के अलावा कुछ नहीं किया। आखिरकार, बॉब ने मुझे जानकारी दी, हमने हंगामा किया और मैंने अपनी रिपोर्ट पूरी की। लेकिन मैंने 40 मिनट की उत्पादकता खो दी।

यह एसिंक्रोनस बनाम तुल्यकालिक व्यवहार है

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

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

var outerScopeVar;    
var img = document.createElement('img');

// Here we register the callback function.
img.onload = function() {
    // Code within this function will be executed once the image has loaded.
    outerScopeVar = this.width;
};

// But, while the image is loading, JavaScript continues executing, and
// processes the following lines of JavaScript.
img.src = 'lolcat.png';
alert(outerScopeVar);

ऊपर दिए गए कोड में, हम जावास्क्रिप्ट को लोड करने के लिए कह रहे हैं lolcat.png, जो एक स्लो ऑपरेशन है। इस धीमे संचालन के बाद कॉलबैक फ़ंक्शन निष्पादित किया जाएगा, लेकिन इस बीच, जावास्क्रिप्ट कोड की अगली पंक्तियों को संसाधित करता रहेगा; यानी alert(outerScopeVar)।

यही कारण है कि हम सतर्क दिखाते हैं undefined; चूंकि alert()छवि को लोड किए जाने के बजाय तुरंत संसाधित किया जाता है।

हमारे कोड को ठीक करने के लिए, हमें केवल कॉलबैक फ़ंक्शन मेंalert(outerScopeVar) कोड को स्थानांतरित करना होगा । इसके परिणामस्वरूप, हमें अब outerScopeVarवैश्विक वैरिएबल के रूप में घोषित चर की आवश्यकता नहीं है ।

var img = document.createElement('img');

img.onload = function() {
    var localScopeVar = this.width;
    alert(localScopeVar);
};

img.src = 'lolcat.png';

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

इसलिए, हमारे सभी उदाहरणों में, function() { /* Do something */ }कॉलबैक है; सभी उदाहरणों को ठीक करने के लिए, हमें केवल उस कोड को स्थानांतरित करना होगा जिसमें ऑपरेशन की प्रतिक्रिया की आवश्यकता है!

* तकनीकी रूप से आप इसका उपयोग कर सकते हैं eval(), लेकिन इस उद्देश्य के लिए eval()बुराई है

मैं अपने कॉलर को प्रतीक्षा में कैसे रखूं?

वर्तमान में आपके पास इसके समान कुछ कोड हो सकते हैं;

function getWidthOfImage(src) {
    var outerScopeVar;

    var img = document.createElement('img');
    img.onload = function() {
        outerScopeVar = this.width;
    };
    img.src = src;
    return outerScopeVar;
}

var width = getWidthOfImage('lolcat.png');
alert(width);

हालाँकि, अब हम जानते हैं कि return outerScopeVarतुरंत होता है; onloadकॉलबैक फ़ंक्शन से पहले चर को अद्यतन किया गया है। यह getWidthOfImage()वापस लौटने undefinedऔर undefinedसतर्क रहने की ओर जाता है ।

इसे ठीक करने के लिए, हमें फ़ंक्शन getWidthOfImage()कॉलबैक को पंजीकृत करने के लिए फ़ंक्शन को कॉल करने की अनुमति देने की आवश्यकता है , फिर उस कॉलबैक के भीतर होने वाली चौड़ाई के अलर्टिंग को स्थानांतरित करें;

function getWidthOfImage(src, cb) {     
    var img = document.createElement('img');
    img.onload = function() {
        cb(this.width);
    };
    img.src = src;
}

getWidthOfImage('lolcat.png', function (width) {
    alert(width);
});

... पहले की तरह, ध्यान दें कि हम वैश्विक चर (इस मामले में width) निकालने में सक्षम हैं ।

— मैट
स्रोत
लेकिन यदि आप किसी भिन्न गणना में परिणामों का उपयोग करना चाहते हैं या किसी वस्तु चर में संग्रहीत करना चाहते हैं, तो यह कैसे उपयोगी है?
— केन इंग्राम
68

यहां उन लोगों के लिए अधिक संक्षिप्त जवाब दिया गया है जो त्वरित संदर्भ के साथ-साथ कुछ उदाहरणों का उपयोग कर रहे हैं जो वादे और async / प्रतीक्षा का उपयोग कर रहे हैं।

उस फ़ंक्शन के लिए भोले दृष्टिकोण (जो काम नहीं करता है) से शुरू करें जो एक अतुल्यकालिक विधि (इस मामले में setTimeout) को कॉल करता है और एक संदेश देता है:

function getMessage() {
  var outerScopeVar;
  setTimeout(function() {
    outerScopeVar = 'Hello asynchronous world!';
  }, 0);
  return outerScopeVar;
}
console.log(getMessage());

undefinedइस मामले में लॉग इन किया जाता है क्योंकि कॉलबैक कॉल करने और अपडेट getMessageहोने से पहले रिटर्न ।setTimeoutouterScopeVar

इसे हल करने के दो मुख्य तरीके कॉलबैक और वादों का उपयोग कर रहे हैं :

कॉलबैक

यहां परिवर्तन यह है कि getMessageएक callbackपैरामीटर को स्वीकार करता है जिसे कॉल कोड को वापस उपलब्ध कराने के लिए परिणाम उपलब्ध कराने के लिए बुलाया जाएगा।

function getMessage(callback) {
  setTimeout(function() {
    callback('Hello asynchronous world!');
  }, 0);
}
getMessage(function(message) {
  console.log(message);
});

वादे

वादे एक विकल्प प्रदान करते हैं जो कॉलबैक की तुलना में अधिक लचीला होता है क्योंकि उन्हें स्वाभाविक रूप से कई async संचालन समन्वय करने के लिए जोड़ा जा सकता है। एक वादा / ए + मानक कार्यान्वयन मूल रूप से नोड.जेएस (0.12+) और कई वर्तमान ब्राउज़रों में प्रदान किया गया है, लेकिन यह भी ब्लूबर्ड और क्यू जैसी पुस्तकालयों में लागू किया गया है ।

function getMessage() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve('Hello asynchronous world!');
    }, 0);
  });
}

getMessage().then(function(message) {
  console.log(message);  
});

jQuery के आस्थगित

jQuery अपनी Deferreds के साथ वादों के समान कार्यक्षमता प्रदान करता है।

function getMessage() {
  var deferred = $.Deferred();
  setTimeout(function() {
    deferred.resolve('Hello asynchronous world!');
  }, 0);
  return deferred.promise();
}

getMessage().done(function(message) {
  console.log(message);  
});

async / इंतजार

यदि आपके जावास्क्रिप्ट वातावरण में ( asyncऔर awaitNode.js 7.6+ की तरह) समर्थन शामिल है , तो आप asyncकार्यों के भीतर समान रूप से वादों का उपयोग कर सकते हैं :

function getMessage () {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve('Hello asynchronous world!');
        }, 0);
    });
}

async function main() {
    let message = await getMessage();
    console.log(message);
}

main();
— JohnnyHK
स्रोत
पिछले कुछ घंटों से प्रोमिस पर आपका नमूना मूल रूप से वही है जो मैं खोज रहा था। आपका उदाहरण सुंदर है और एक ही समय में वादा करता है। यह कहीं और क्यों नहीं है।
— विंसेंट पी
यह सब ठीक है, लेकिन क्या होगा अगर आपको मापदंडों के साथ गेटमेज () कॉल करने की आवश्यकता है? उस परिदृश्य में आप ऊपर कैसे लिखेंगे?
— चिवड़ा
2
@Chiwda तुम बस कॉलबैक पैरामीटर पिछले रखा function getMessage(param1, param2, callback) {...}:।
— जॉनीएचके
मैं आपके async/awaitनमूने की कोशिश कर रहा हूं , लेकिन मैं समस्याओं में भाग रहा हूं। एक पल को रोकने के बजाय new Promise, मैं एक .Get()कॉल कर रहा हूं और इसलिए किसी भी resolve()तरीके की पहुंच नहीं है । इस प्रकार मेरा getMessage()वादा लौट रहा है और परिणाम नहीं। क्या आप इसके लिए अपने वाक्य को एक कार्य सिंटैक्स दिखाने के लिए संपादित कर सकते हैं?
— InteXX
@InteXX मुझे यकीन नहीं है कि आप .Get()कॉल करने के बारे में क्या मतलब रखते हैं । शायद एक नया सवाल पोस्ट करने के लिए सबसे अच्छा है।
— जॉनीएचके
52

स्पष्ट बताने के लिए, कप का प्रतिनिधित्व करता है outerScopeVar।

अतुल्यकालिक कार्यों की तरह हो ...

कॉफी के लिए अतुल्यकालिक कॉल

— जोहान्स फारेनक्रग
स्रोत
13
जबकि एक अतुल्यकालिक कार्य अधिनियम को समकालिक बनाने की कोशिश करना 1 सेकंड में कॉफी पीने की कोशिश करना होगा, और इसे 1 मिनट में आपकी गोद में डालना होगा।
— तेयपेमम
अगर यह स्पष्ट था, तो मुझे नहीं लगता कि सवाल पूछा जाएगा, नहीं?
— ब्रोकोली
2
@ ब्रोकली
— २०००
13

अन्य उत्तर बहुत अच्छे हैं और मैं बस इस पर एक सीधा आगे उत्तर प्रदान करना चाहता हूं। बस jQuery अतुल्यकालिक कॉल करने के लिए सीमित है

सभी ajax कॉल (सहित $.getया $.postया $.ajax) अतुल्यकालिक कर रहे हैं।

अपने उदाहरण को देखते हुए

var outerScopeVar;  //line 1
$.post('loldog', function(response) {  //line 2
    outerScopeVar = response;
});
alert(outerScopeVar);  //line 3

कोड निष्पादन लाइन 1 से शुरू होता है, जो चर और ट्रिगर को घोषित करता है और लाइन 2 पर अतुल्यकालिक कॉल करता है, (यानी, पोस्ट अनुरोध) और यह लाइन 3 से अपना निष्पादन जारी रखता है, इसके निष्पादन को पूरा करने के लिए पोस्ट अनुरोध का इंतजार किए बिना।

कहते हैं कि पोस्ट अनुरोध को पूरा होने में 10 सेकंड लगते हैं, outerScopeVarइच्छा का मूल्य केवल उन 10 सेकंड के बाद सेट किया जाएगा।

कठिन परीक्षा लेना,

var outerScopeVar; //line 1
$.post('loldog', function(response) {  //line 2, takes 10 seconds to complete
    outerScopeVar = response;
});
alert("Lets wait for some time here! Waiting is fun");  //line 3
alert(outerScopeVar);  //line 4

अब जब आप इसे निष्पादित करते हैं, तो आपको लाइन 3 पर एक अलर्ट मिलेगा। अब कुछ समय तक प्रतीक्षा करें जब तक कि आप सुनिश्चित न हों कि पोस्ट अनुरोध ने कुछ मूल्य वापस कर दिया है। फिर जब आप अलर्ट बॉक्स पर ओके पर क्लिक करते हैं, तो अगला अलर्ट अपेक्षित मूल्य प्रिंट करेगा, क्योंकि आपने इसके लिए इंतजार किया था।

वास्तविक जीवन परिदृश्य में, कोड बन जाता है,

var outerScopeVar;
$.post('loldog', function(response) {
    outerScopeVar = response;
    alert(outerScopeVar);
});

सभी कोड जो अतुल्यकालिक कॉल पर निर्भर करते हैं, उन्हें अतुल्यकालिक ब्लॉक के अंदर स्थानांतरित किया जाता है, या अतुल्यकालिक कॉल पर प्रतीक्षा करके।

— तेजा
स्रोत
or by waiting on the asynchronous callsकिसी से ऐसा कैसे संभव है?
— InteXX
@InteXX एक कॉलबैक विधि का उपयोग करके
— तेजा
क्या आपके पास एक त्वरित वाक्यविन्यास उदाहरण है?
— InteXX
10

इन सभी स्थितियों में outerScopeVarसंशोधित या एक मूल्य असाइन किया गया है एसिंक्रोनस रूप से या बाद में किसी समय में हो रहा (इंतजार कर या किसी घटना होने के लिए सुन रहा), जिसके लिए वर्तमान निष्पादन के लिए इंतजार नहीं होगा में वर्तमान निष्पादन प्रवाह परिणाम तो इन सभी मामलोंouterScopeVar = undefined

आइए प्रत्येक उदाहरणों पर चर्चा करें (मैंने उस हिस्से को चिह्नित किया है जिसे असिंक्रोनसली कहा जाता है या कुछ घटनाओं के होने में देरी होती है):

1।

यहां छवि विवरण दर्ज करें

यहां हम एक इवेंटलिस्ट को रजिस्टर करते हैं, जिसे उस विशेष घटना पर निष्पादित किया जाएगा। छवि का लोड हो रहा है। फिर अगली लाइनों के साथ वर्तमान निष्पादन जारी है img.src = 'lolcat.png';और alert(outerScopeVar);इस बीच घटना नहीं हो सकती है। यानी, फंतासी img.onloadको लोड करने के लिए , अतुलनीय रूप से संदर्भित छवि के लिए प्रतीक्षा करें। यह सभी फ़ोलोइंग उदाहरण होगा- घटना भिन्न हो सकती है।

2।

2

यहां टाइमआउट इवेंट भूमिका निभाता है, जो निर्दिष्ट समय के बाद हैंडलर को आमंत्रित करेगा। यहाँ यह है 0, लेकिन फिर भी यह एक अतुल्यकालिक घटना को पंजीकृत करता है इसे Event Queueनिष्पादन के लिए अंतिम स्थिति में जोड़ा जाएगा , जो कि गारंटी में देरी करता है।

3।

यहां छवि विवरण दर्ज करें इस बार अजाक्स कॉलबैक।

4।

यहां छवि विवरण दर्ज करें

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

5।

यहां छवि विवरण दर्ज करें

स्पष्ट वादा (भविष्य में कुछ किया जाएगा) अतुल्यकालिक है। देखें कि जावास्क्रिप्ट में Deferred, Promise और Future के बीच क्या अंतर हैं?

https://www.quora.com/Whats-the-difference-between-a-promise-and-a-callback-in-Javascript

— टॉम सेबस्टियन
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.