सभी को नमस्कार!

इस लेख में, मैं आपके साथ कुछ विचार साझा करना चाहूंगा कि आप किस प्रकार व्यवहार में प्रयोग कर सकते हैं तंत्र के लिए काम कर सकते हैं अतुल्यकालिक प्रक्रियाओं के साथ जो कि jQuery पुस्तकालय द्वारा प्रदान किया गया है संस्करण 1.5 से आस्थगित, "स्थगित" (jQuery.Deferred), साथ ही संबंधित वस्तुओं और विधियों के साथ। ।

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

अतुल्यकालिक प्रक्रियाएं

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

var result = readValueBy(key); console.info(result);

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

अतुल्यकालिक प्रक्रिया उदाहरण

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

 $.post("ajax/test.html", function( data ) { $( ".result" ).html( data ); });

इसके अलावा, यह $.post() विधि ( देखें ) के लिए आधिकारिक jQuery प्रलेखन से एक उदाहरण है।
ध्यान दें कि दूसरा पैरामीटर कॉलबैक फ़ंक्शन को विधि में पास करता है, जो परिणाम को पहले तर्क के रूप में लेता है - सर्वर की प्रतिक्रिया।

इस तरह के एक अनुरोध के लिए यहां एक विकल्प दिया गया है:

 $.ajax({ type: "POST", url: "ajax/test.html", data: data, success: function( data ) { $( ".result" ).html( data ); }, dataType: dataType });

इस उदाहरण में, सफलता हैंडलर को अन्य मापदंडों के साथ ऑब्जेक्ट की success संपत्ति के रूप में पारित किया जाता है।

लेकिन, jQuery 1.5 के साथ शुरू, ajax तरीके ($ .get, $ .post, $ .ajax) उन्हें हैंडलर पास किए बिना कहा जा सकता है, क्योंकि ये विधियाँ न केवल एक XMLHTTPRequest ऑब्जेक्ट लौटाती हैं, बल्कि यह ऑब्जेक्ट, प्रॉमिस इंटरफ़ेस को लागू करने वाले तरीकों से अतिभारित है । व्यावहारिक दृष्टिकोण से, इसका मतलब है कि एक अतुल्यकालिक प्रक्रिया (= सर्वर से अनुरोध) शुरू करने से, हम सफल निष्पादन के लिए कॉलबैक को इंगित करने के लिए जल्दी नहीं कर सकते हैं, एक त्रुटि स्थिति से निपटने के लिए, आदि, और जब हम उन्हें निर्दिष्ट करने की आवश्यकता नहीं होती है, तो खुद को एक तक सीमित न करें। । हम एक चर में सर्वर अनुरोध को बचा सकते हैं:

 function api(key, data) { return $.post('ajax/' + key, data); } // .. var requestData = { id: '79001' }, storeDataRequest = api('get_store_by_id', requestData); //

... और बाद में हमें उन सभी कॉलबैक को "हैंग" करना चाहिए:

 function addStandardHandlers(request, requestData, model) { request.done(function(data){ //   ,        //        model.received(requestData, data && data.payload); }).fail(function(){ //      //   ,        model.received(requestData, null); }); } function addUIHandlers(request, $messageHolder) { //   .. request.done(function(data){ // ..   "", $messageHolder.text('Success'); }).fail(function(){ //    - // ",  " $messageHolder.text('Error, please retry.'); }).always(function(){ //   ,   ,   , //        window.setTimeout(function(){ $messageHolder.fadeOut(); }, 3000); }); } //  ,    addStandardHandlers(storeDataRequest, requestData, context.getModel()); //  ,   UI addUIHandlers(storeDataRequest, $('.main_page-message_holder'));

यदि हमारे कार्यक्रम में एक सौ एक स्थान हैं जहां हमें सर्वर से संपर्क करने की आवश्यकता है, और हर जगह प्रतिक्रिया संरचना को समान प्रसंस्करण की आवश्यकता है, तो सर्वर के कॉल बिंदुओं पर हैंडलर के लिए समान कोड का उत्पादन नहीं करना तर्कसंगत है, लेकिन आवश्यकता के आधार पर अनुरोध के प्रत्येक उदाहरण पर "लटका" का उपयोग करते हुए। यह जानते हुए कि अजाक्स अनुरोध अब वादे भी हैं। नीचे दिए गए वादों के बारे में देखें।

अन्य अतुल्यकालिक प्रक्रियाएं

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

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

Deferred क्या समस्याओं को हल करता है?

आइए उन स्थितियों के बारे में सोचते हैं जब हमें फ़ंक्शन पैरामीटर या ऑब्जेक्ट प्रॉपर्टी के रूप में कॉलबैक पास करने से अधिक कुछ चाहिए (जैसा कि हमने सरल अजाक्स उदाहरणों में देखा था):

एक ही प्रक्रिया समाप्ति घटना के लिए एक से अधिक कॉलबैक कैसे असाइन करें?
इसके पूरा होने के बाद एक अपेक्षित घटना की पहचान कैसे करें?
कैसे एक प्रक्रिया के आसपास संभाला जा रहा द्वारा सभी कॉलबैक हैंडलर समूह के लिए?

मुझे याद है कि कितने समय पहले हमने कई ऑनलोड इवेंट हैंडलर्स के लिए पहले बिंदु की समस्या को हल किया था:

 window.onload = (function(oldHandler){ return function(){ if (oldHandler) oldHandler(); // new code here.. }; })(window.onload);

यह अच्छा है कि यह बीते दिनों की समस्या है। आज कोई भी ऐसा नहीं करता है (मुझे उम्मीद है) और सिर्फ $ .on (..) (jQuery के साथ काम करना) के बारे में याद रखना अगर हम दस्तावेज़ घटनाओं के बारे में बात कर रहे हैं। और $ .Deferred () के बारे में - जब हम सब कुछ के बारे में बात करते हैं। (जानबूझकर अतिशयोक्ति के लिए खेद है, यह कथन के उद्देश्य को पूरा करता है।) ठीक है, "कई हैंडलर को क्या करना है?" एक और सवाल है। मान लीजिए, उदाहरण के लिए, डेटा पार्स कर सकते हैं, और दूसरा - रोजगार संकेतक छिपाएं या स्थिति पाठ को बदल दें, जैसा कि ऊपर दिए गए उदाहरण में दिया गया है। पहले, हमें मॉडल और डिस्प्ले के साथ काम करने में अपना सब कुछ झोंकना पड़ता था, एक हैंडलर में, अब हमारे पास साझा करने की स्वतंत्रता है।

इसके अलावा, कुछ साल पहले, ध्वज चर के चारों ओर कुछ प्रकार के ढेर द्वारा दूसरा बिंदु हल किया गया था, जिस पर हैंडलर का शरीर बंद था। मुझे स्पष्ट रूप से याद है कि हमने कैसे सोचा था कि हमारे विजेट को कैसे बताया जाए कि डोम तैयार पहले ही लोड हो चुका था। लेकिन वहाँ $(function(){ ... }) , जिसे अब jQuery में लागू कर दिया गया है। और इसका मतलब यह है कि इस डिज़ाइन में कॉलबैक तब भी काम करेगा जब डोम तैयार होने के बाद कोड निष्पादित किया जाता है। उपयोग पैटर्न सरल है। हैंडलर को "हैंग अप" करें। यदि प्रक्रिया पहले ही पूरी हो गई है, तो हैंडलर तुरंत चलता है। यदि नहीं, तो भविष्य में इसके होने के समय हैंडलर (इस प्रकार के सभी हैंडलर) को निष्पादित किया जाएगा।

आइए तीसरी समस्या को हल करने के लिए स्थगित देखें। आस्थगित के साथ, हमारे पास प्रक्रिया को सफलतापूर्वक पूरा करने के लिए हैंडलर का एक समूह है, असफल - (गलत या अप्रत्याशित) समाप्ति के लिए, एक समूह है जिसे किसी भी छोर ("प्रेम") कहा जाएगा। एक समूह भी है जिसमें हैंडलर ऑपरेशन की प्रगति को ट्रैक कर सकते हैं।

इसलिए, हमने $ .Deferred () का उपयोग करके हल की गई तीन समस्याओं की जाँच की।

Deferred का उपयोग करने के लिए आवश्यकताएँ

आइए उन परिस्थितियों की रूपरेखा तैयार करें जब हमें अपने कार्यक्रम में आस्थगित का उपयोग करने के बारे में सोचने की आवश्यकता है।

हम तब Deferred का उपयोग करने के बारे में सोचेंगे।

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

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

दूसरा आधार। आइए कोड पर एक नज़र डालें:

 $.post("ajax/cart", function( data1 ) { //  1. //   data1 // if (data1 && data.success) .... //  2. //      var processedData1 = data1.payload; //  3. //      : $.post("ajax/shipping", processedData1, function( data2 ) { //  1. //  2. var processedData2 = data2.payload; //  3. $.post("ajax/payment", data2, function( data3 ) { //  1. //  2. var processedData3 = data3.payload; //  3.    $( ".result" ).html( processedData3 ); }); }); });

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

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

पहले, मैं विधि के तर्क को चरणों में तोड़ दूंगा। मुझे ऊपर दिए गए उदाहरण के आधार पर प्रदर्शित करें:

 function purchaseStep01_CartDataRequestFor(input) { return $.post("ajax/cart", input); } function purchaseStep02_UpdateShippingInfoRequestFor(input) { return $.post("ajax/shipping", input); } function purchaseStep03_SubmitPaymentDetailsRequestFor(input) { return $.post("ajax/payment", input); }

दूसरे, यह अनुरोध भेजने के लिए पर्याप्त नहीं है, उत्तर देने के लिए सामान्य कार्यक्षमता के रूप में प्रदान करना आवश्यक है:

 //   : // -  -  -  //   /   function handleResponseData(request, specificLogic) { //    -promise,    fail //   ,  AJAX  ,   //        success==true // (          ) //      ,      return $.Deferred(function(def){ request .fail(def.reject) .done(function(data){ if (!data || !data.success) return def.reject(); if (!specificLogic) return def.resolve(data); try { def.resolve(specificLogic(data)); } catch (e) { def.reject(e); } }); }).promise(); }

... और प्रत्येक अनुरोध के परिणाम को अलग से संसाधित करने का तर्क। हम उपरोक्त का उपयोग करके इस तर्क को संगत करेंगे:

 //  1.   .  . var step01_CartDataPromise = handleResponseData( purchaseStep01_CartDataRequestFor(data), function (data){ //       . //    -  ,    fail. if (!data.cart) throw new Error('Cart info is missing'); //  -  ,     cartInfo  . return data.cart; }), // <- , ..         . //  2.       1. //       : // step02_ShipInfoPromise = step01_CartDataPromise.then().done(function(cartInfo){... // then()   ,      // .      jQuery step02_ShipInfoPromise = step01_CartDataPromise.then(function(cartInfo){ return handleResponseData( purchaseStep02_UpdateShippingInfoRequestFor({ id: cartInfo.id}), function (data){ if (!data.shipping) throw new Error('Shipping info is missing'); return { cart: cartInfo, shipping: data.shipping }; }); }), //  3.     2. step03_PaymentResultPromise = step02_ShipInfoPromise.then(function(prePurchaseInfo){ return handleResponseData( purchaseStep03_SubmitPaymentDetailsRequestFor(prePurchaseInfo), function (data){ if (!data.payment) throw new Error('Payment gone wrong'); return data.payment; }); }); // <-    //          ,  //       //     done()  then()  function(paymentInfo)..  //    function(prePurchaseInfo)..   . // .    2. step03_PaymentResultPromise.then(function(paymentInfo){ $('.result').html( paymentInfo.message ); });

इस निर्णय के विपक्ष:

तर्क कार्यों के निर्धारण के कारण कोड अधिक पंक्तियों में लिखा गया है
आपको यह याद रखने की जरूरत है कि कैसे $.Deferred(..) कंस्ट्रक्टर काम करता है, साथ ही एक-के-दूसरे क्रम में दो वादों को जोड़ने की विधि - .then(..) , और याद रखें कि अंदर then आपको वादा देना याद होगा। यानी handleResponseData फ़ंक्शन को कॉल करने से पहले return डालना न भूलें, जो वादा वापस करता है।

पेशेवरों:

डेटा भेजने के तर्क की विविधता और प्राप्त प्रतिक्रिया को संसाधित करने का तर्क
एक स्थान पर ऑपरेशन की सफलता के बारे में निर्णय लेने के तर्क का स्थान और बाहर से इस निर्णय को प्रभावित करने में असमर्थता। $.Deferred(..).promise() का एक गुच्छा $.Deferred(..).promise() handleResponseData() ।
अपने विभिन्न चरणों में एक ही ऑपरेशन की सफलता पर निर्णय तर्क का स्थान। def.reject(..) कॉल को handleResponseData() अंदर handleResponseData() । ऑपरेशन को न केवल असफल माना जाता है, अगर सर्वर ने काम करने से इनकार कर दिया, बल्कि अगर यह सही ढंग से काम करता है, लेकिन अपर्याप्त डेटा लौटाया। और यह भी, अगर डेटा इसके प्रसंस्करण ( catch(e){ .. } शाखा) के बाद सत्यापन पास नहीं किया। अब $ .Deferred का उपयोग किए बिना हम इसे कैसे लागू करेंगे, इसके बारे में सोचें।
तर्क की बेहतर संरचना, इसके घोंसले को कम करना, समर्थन में वृद्धि।

कुछ तर्क देंगे कि फायदे संख्या और गुणवत्ता दोनों को पछाड़ते हैं।

मुझे लगता है कि उन्होंने परिसर का प्रदर्शन किया है। और आगे चलते हैं। उदाहरण शुरू करने से पहले, मैं वादों के बारे में कुछ शब्दों का वादा करता हूं।

वादा

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

 var def = $.Deferred(); //   , //  "" def.resolve()  def.reject() // //  readonly- promise, //   def //  ""  var promise = def.promise()

सबसे अधिक बार, सबसे सुरक्षित और सुरक्षित तरीका है आस्थगित संदर्भ का उपयोग करने के लिए पैरामीटर द्वारा पारित फ़ंक्शन के अंदर अपने तर्क को परिभाषित करना है:

 $.Deferred(function(def){ //       , //  resolve()  reject() //    . });

इस तरह के एक उपयोग को तुरंत "भूल" (बिना भूल के) किया जा सकता है .promise() द्वारा इस वस्तु तक पहुंच को अवरुद्ध करने के लिए।

एक साधारण उदाहरण। टाइमआउट की शुरुआत प्रक्रिया के सफल समापन को निर्धारित करती है।

 function doneTimeout(timeout) { return $.Deferred(function(def){ window.setTimeout(def.resolve, timeout); }).promise(); }

ऐसा लगता है कि मैंने वादों के बारे में बात करने के अपने वादे को पूरा किया। उदाहरण।

उदाहरण

मैं कहूंगा कि कुछ समय पहले मैं अवधारणाओं को प्रतिफलित / वादा करने में पूरी तरह से असमर्थ था और आधिकारिक वेबसाइट पर उदाहरणों से प्रेरणा ली।

चित्र अपलोड करें

विशेष रूप से, मैं चित्रों के लोडिंग को नियंत्रित करने की प्रक्रिया से परिचित हो गया। लेकिन फिर इसे जोड़ने के लिए मेरे साथ ऐसा हुआ कि न केवल यह पहचानना संभव होगा कि चित्र लोड किया गया था या नहीं, बल्कि इसका विवरण भी:

 var loadImage = createCache(function(defer, url) { var image = new Image(); function cleanUp() { image.onload = image.onerror = null; } defer.then( cleanUp, cleanUp ); image.onload = function() { defer.resolve( url, { width: image.width, height: image.height }); }; image.onerror = defer.reject; image.src = url; });

तैयार दस्तावेज की घटना का निर्धारण

हमने पहले ही ऊपर $(function(){.. }) बारे में बात की थी। मुझे केवल आपको अपने शुद्ध रूप में दस्तावेज़ की तत्परता का वादा वस्तु प्राप्त करने का एक तरीका देना चाहिए:

 var domReadyPromise = $.ready.promise();

टाइमआउट स्थिति की शुरुआत

हमने पहले ही टाइमआउट उदाहरण की जांच की है, जो की घटना प्रक्रिया के सफल समापन को पूरा करती है, doneTimeout() । लेकिन अब हमें एक विकल्प की भी आवश्यकता है जिसमें टाइमआउट करके यह माना जाएगा कि प्रक्रिया एक त्रुटि के साथ पूरी हुई। यहाँ यह है:

 function failTimeout(timeout) { return $.Deferred(function(def){ window.setTimeout(def.reject, timeout); }).promise(); }

हम उस बटन के तर्क को लागू कर सकते हैं जो इस बात की परवाह नहीं करता है कि आप इसे दबाते हैं या नहीं, क्योंकि 10 सेकंड के बाद यह खुद ही प्रेस हो जाएगा। क्या ऐसा होता है? यह कौन सोच सकता है?

 var timeToSubmit = $.Deferred(function(def){ doneTimeout(10000).done(def.resolve); $('.submissionButton').one('click', function(){ def.resolve(); return false; }); }).promise(); timeToSubmit.done(function(){ //       //    });

पृष्ठ तत्वों पर एनीमेशन समाप्त करें

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

 function animationPromise($element){ return $.Deferred(function(def){ $element.fadeIn( 10000 , def.resolve ); }).promise(); }

हालाँकि, यह पूरी तरह से अनावश्यक है। प्रत्येक jQuery तत्व एक वादा () कॉल का समर्थन करता है, इस पर एनीमेशन को समाप्त करने का वादा वापस करता है:

 function animationPromise($element){ return $element.fadeIn( 10000 ).promise(); }

आप इस तरह एनीमेशन के अंत तक "सुन" सकते हैं:

 animationPromise($('#foo')).done(function(){ console.log('Animation is finished'); });

या बस:

 $element.fadeIn( 10000 ).promise().done(function(){ console.log('Animation is finished'); });

यह मत भूलो कि इस तरह से आपको दूसरे पर एक एनीमेशन "स्ट्रिंग" नहीं करना चाहिए। इसके लिए अधिक संक्षिप्त नियमित तरीके हैं:

 $element.fadeIn( 10000 ).fadeOut( 10000 );

मोडल संवाद का रखरखाव

पुस्तकालयों के कई उदाहरण हैं जो पृष्ठ इंटरफ़ेस के साथ उपयोगकर्ता की बातचीत में सुधार करते हैं, जो, हालांकि, कभी-कभी प्रोग्रामर के बारे में भूल जाते हैं।

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

मैं पाठक को सुझाव देता हूं कि वे ट्विटर बूटस्ट्रैप मोडल विंडो रैपर के अपने स्वयं के कार्यान्वयन के बारे में सोचें, यदि निश्चित रूप से, यह विषय उसके करीब है। और मैं दूसरी बार अपना उदाहरण दूंगा।

कई प्रक्रिया उम्मीदों का मेल

एक से अधिक लंबित प्रक्रिया की अपेक्षा को संयोजित करने की आवश्यकता स्पष्ट है। ऊपर, हमने दो राज्यों में से एक के त्वरित शुरुआत के इंतजार का एक उदाहरण माना: एक टाइमआउट या एक बटन दबाकर। ऐसी ही कई स्थितियां हैं जहां कई घटनाओं के होने की उम्मीद अपने आप में एक घटना बन जाती है, जिसका परिणाम उसके घटकों के परिणाम पर निर्भर करता है।

आम तौर पर, jQuery हमें एक ऐसा तरीका प्रदान करता है जो वादों को$.when() स्वीकार करता है , और एक नया वादा देता है , जिसकी सफलता प्रत्येक वादे के पूर्ण सफल होने के कारण होती है जो इसे बनाता है, और किसी भी विफलता को कम से कम विफल कर देता है। यह एक प्रकार का लॉजिकल ऑपरेशन है। आउटपुट केवल TRUE (= सफलता) है, जब सभी ऑपरेशन्स TRUE भी होते हैं, अन्य मामलों में - FALSE (= विफलता)।

पर्याप्त नहीं है, जैसा कि हम देखते हैं, तार्किक या का एनालॉग है। यानीइस तरह की एक विधि, वादों का संयोजन, जो ऑपरेशन की विफलता का संकेत देती है यदि और केवल अगर हर कोई अपने वादे को पूरा नहीं करता है तो विफलता भी समाप्त होती है। और अन्य मामलों में, ऑपरेशन सफलता में समाप्त होता है।

मैं इस तरह के कार्यान्वयन के अपने स्वयं के स्केच यहां दूंगा:

 // fail if and only if all fail: function failIifAllFail(_promise_array){ var promises = [].slice.apply(arguments), count = promises.length; return $.Deferred(function(def){ //      var done = 0, fail = 0; //             //   check() ,       //     $.each(promises, function wrap(key, p){ p.done(function(){ done++; check(); }).fail(function(){ fail++; check(); }); }); function check(){ if ((done + fail) < count) return; if (fail === count) def.resolve(); else def.reject(); } }).promise(); }

लंबी कंप्यूटिंग पर नियंत्रण

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

मैं पाठक को अपने दम पर कार्यान्वयन के बारे में सोचने का सुझाव देता हूं, और फिर एक अलग नोट में क्या होता है, इसकी तुलना करें।

आपका ध्यान के लिए धन्यवाद!

$ का उपयोग करने के बारे में। अतुल्यकालिक कार्यों के साथ काम करने में पसंदीदा