प्रत्येकडिफर्ड - आस्थगित संग्रह प्रसंस्करण, एक-एक करके

वर्तमान उद्यम परियोजना के विकास के दौरान, jQuery तत्वों के संग्रह के स्थगित प्रसंस्करण को लागू करना आवश्यक था - विगेट्स का एक सेट था, जिनमें से सामग्री को बदले में लोड किया जाना था, और लोडिंग अतुल्यकालिक रूप से हुई। मुझे $.fn लिए एक छोटा सा विस्तार लिखना पड़ा - eachDeferred ।

यह विचार काफी सरल है - हमारे पास jQuery तत्वों का एक संग्रह है जिसे लूप में संसाधित करने की आवश्यकता है, जबकि पुनरावृत्ति वर्तमान तत्व के प्रसंस्करण के पूरा होने के बाद ही होनी चाहिए।

कृपया ध्यान दें कि चर्चा के विषय में $.Deferred jQuery ऑब्जेक्ट्स के साथ काम करने का ज्ञान शामिल है।

 (function ($) { $.fn.extend({ /* * Iterates over jQuery object collection using deferred callbacks. * the function assigned for iterator should return promise. * resolved promises notify the main deferred, so we can track each loop result. * returns promise. */ eachDeferred: function (c) { var that = this, dfd = $.Deferred(), elms = $.makeArray(that), i = elms.length, next = function () { setTimeout(function () { elms.length ? cb(elms.shift()) : dfd.resolve(that); }, 0); }, cb = function (elm) { $.when(c.call(elm, i - elms.length, $(elm))).done(function (result) { dfd.notify(result); next(); }); }; next(); return dfd.promise(); } }); })(jQuery); 

वर्तमान पुनरावृत्ति के पूरा होने का निर्धारण करने के लिए पुनरावृत्ति फ़ंक्शन को $.Deferred ऑब्जेक्ट वापस करना चाहिए। प्रत्येक eachDeferred प्लगइन कोड eachDeferred भी $.Deferred ऑब्जेक्ट है कि कॉल श्रृंखला में इस्तेमाल किया जा सकता है। ऑब्जेक्ट सूचना notify/progress माध्यम से प्रत्येक पुनरावृत्ति के परिणामों को सूचित करता है, पुनरावृत्ति परिणाम ( arg , जो $.Deferred.resolve(arg) से वापस आ सकता है। लूप हैंडलर फ़ंक्शन के $.Deferred.resolve(arg) ) को .progress(function(arg){}) के कोड में .progress(function(arg){}) ( .progress(function(arg){}) यदि उपलब्ध हो)।

कोड से एक छोटी कॉपी / पेस्ट

 that.widgets.eachDeferred(function (i, widget) { return that.renderContent(widget); }).done(dfd.resolve); 

renderContent असिंक्रोनस रूप से सर्वर से डेटा खींचता है और विजेट की सामग्री को प्रदर्शित करता है। नेत्रहीन यह महसूस करता है कि प्रत्येक विजेट प्राथमिकता के क्रम में लोड हो रहा है। सामान्य तंत्र का उपयोग करने के मामले में $.Deferred ( $.get().success() ) विगेट्स को बेतरतीब ढंग से प्रदर्शित किया जाएगा - जो लोड नहीं करेगा।

एक और उदाहरण

 var dfd = $.Deferred(), _r = []; xml.children("Tree").eachDeferred(function (i, xmlNode) { return that._buildTreeContents(xmlNode); }).progress(function (treeContents) { _r.push(treeContents); }).done(function () { dfd.resolve(_r); }); return dfd.promise(); 

_buildTreeContents एसिंक्रोनस रूप से ट्री के मार्कअप का निर्माण करता है, हमें प्रत्येक पुनरावृत्ति का परिणाम देता है (हम इसे एक सरणी में सहेजते हैं)। संग्रह को संसाधित करने के अंत में, हमारे पास एक सामान्य ट्री लेआउट है जिसे हम पृष्ठ में सम्मिलित कर सकते हैं।

इस तरह के एक तंत्र सिंक्रोनस (स्थिर) संग्रह के अतुल्यकालिक प्रसंस्करण की अनुमति देता है।

एक छोटा सा काम करने का उदाहरण।

PS यह next() फ़ंक्शन के अंदर अजीब समयबाह्य लग सकता है। JQuery कोड के कारण टाइमआउट की आवश्यकता है - इसमें .notify() को उसी टाइमआउट के माध्यम से कहा जाता है। यह किया जाता है ताकि ब्राउज़र वर्तमान जावास्क्रिप्ट वीएम स्टैक के प्रसंस्करण को पूरा कर सके।

यदि आप मेरे कोड में टाइमआउट नहीं करते हैं, तो अगला पुनरावृत्ति कॉल नियमित स्टैक पर मिलेगा, और इसे .notify() से पहले कॉल किया जाएगा - हमें पहले पुनरावृत्ति के अंत को सूचित करने की आवश्यकता है, और फिर अगले पर जाएं।