आस्थगित सरणी प्रसंस्करण

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

संक्षेप में

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

कमजोर लिंक एक बड़ा चक्र था जिसे केवल तृतीय-पक्ष सेवा से प्राप्त डेटा की एक सरणी को संसाधित करना था। इस मामले में, DOM मॉडल को एक चक्र में एक साथ बदलना आवश्यक था। इन मामलों में, IE गहरी सोच की स्थिति में चला गया और स्वाभाविक रूप से कनेक्शन तोड़ दिया। बाह्य रूप से, यह अस्वीकार्य था - एप्लिकेशन को ब्लॉक करना और लगातार कताई डाउनलोड आइकन ग्राहक को संतुष्ट नहीं कर सकता था। हाँ, कई डोम मॉडल को बदलने की उच्च लागत को सही ढंग से इंगित कर सकते हैं। और मुझे आपको आश्वस्त करना चाहिए कि चक्र के बाहर सभी परिवर्तनों को लेने से समस्या का यह हिस्सा हल हो गया था। हालांकि, मुख्य समस्या - सरणी प्रसंस्करण के दौरान कनेक्शन का संबंध बना रहा।

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

एल्गोरिथ्म

सरणी को तार्किक रूप से कई श्रेणियों में विभाजित किया गया है, जिनमें से प्रत्येक को देरी से संसाधित किया गया है। कार्य का सार चित्र में प्रस्तुत किया गया है:



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

हैंडलर का मुख्य शरीर:

//Lazy array processing /** * Input parameters * params = { * outerFuntion : function(array, start, stop), * mainArray: [] * startIndex: Int, * stepRange Int, * timeOut: Int, * callback: function() *} */ var lazyProcessing = function(params) { var innerFunction = (function(_) { return function() { var arrayLength = _.mainArray.length, stopIndex = _.startIndex + _.stepRange; if(arrayLength < stopIndex) { _.outerFunction( _.mainArray, _.startIndex, arrayLength - _.startIndex); if(_.callback != undefined) { _.callback(); } return; } else { _.outerFunction( _.mainArray, _.startIndex, stopIndex); _.startIndex += _.stepRange; lazyProcessing(_); } } })(params); setTimeout(innerFunction, params.timeOut); }; //Outer function works with mainArray in given range var func = function(mainArray, start, stop) { //TODO: this should be everything you want to do with elements of for (var i = start; i < stop; ++i) { // do something } }; 

LazyProcessing फ़ंक्शन के शरीर में, एक स्थानीय इनरफ़ंक्शन फ़ंक्शन बनाया जाता है , जो प्राप्त पैरामीटर पैरामीटर को बंद कर देता है। यह प्रत्येक बार अनुमति देता है, जब अद्वितीय मापदंडों को बचाने के लिए, स्वयं से lazyProcessing फ़ंक्शन को पुन: कॉल करता है।

इनरफ़ंक्शन फ़ंक्शन एक अनाम फ़ंक्शन लौटाता है, जो निम्नलिखित काफी सरल क्रियाएं करता है:

1. वैश्विक सरणी के अंत की जाँच करता है
2. विभिन्न स्टॉप वैल्यू के साथ बाहरी फ़ंक्शन आउटरफंटियन को कॉल करता है
3. यदि सरणी का अंत पहुँच गया है, तो यह कॉलबैक फ़ंक्शन को कॉल करता है
4. अन्यथा, यह lazyProcessing को पुनरावर्ती कहता है।

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

सरणी के अंत तक पहुंचने पर, कॉलबैक फ़ंक्शन कहा जा सकता है, लेकिन यह वैकल्पिक है।

पेशेवरों और विपक्ष

स्वाभाविक रूप से, इस समाधान के नुकसान और नुकसान हैं:

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

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



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

 /* example of use var arr = ['masha','nadya', 'elena']; iterate_async(arr, function (el, index, arr) { console.log(el + ' is #' + (index + 1)); }, 99); */ function iterate_async (arr, callback, timeout) { var item_to_proceed; item_to_proceed = 0; (function proceed_next () { if (item_to_proceed < arr.length) { setTimeout(function () { callback.call(arr, arr[item_to_proceed], item_to_proceed, arr); item_to_proceed += 1; proceed_next(); }, timeout || 50); } }()); }