🤱🏻 ⛑️ 👊🏾 कॉलबैक फ़ंक्शंस को समझना (कॉलबैक) 🕵🏼 🚴🏾 👂🏽

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

कार्य वस्तुएं हैं

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

जावास्क्रिप्ट में कार्य वास्तव में वस्तुएं हैं। अर्थात्, Function क्लास की वस्तुएं Function कंस्ट्रक्टर द्वारा बनाई गई हैं। Function ऑब्जेक्ट में इस फ़ंक्शन के JS कोड के साथ एक स्ट्रिंग है। यदि आप सी या जावा से स्विच करते हैं, तो यह अजीब लग सकता है (कोड एक स्ट्रिंग कैसे हो सकता है?), लेकिन, आम तौर पर बोल रहा हूं, यह जावास्क्रिप्ट में बहुत आम है। कोड और डेटा के बीच का अंतर कभी-कभी धुंधला हो जाता है।

 //   ,    Function    var func_multiply = new Function("arg1", "arg2", "return arg1 * arg2;"); func_multiply(5, 10); // => 50

फंक्शन-ए-ऑब्जेक्ट कॉन्सेप्ट का लाभ यह है कि कोड को किसी अन्य फ़ंक्शन को उसी तरह से नियमित चर या वस्तु के रूप में स्थानांतरित किया जा सकता है (क्योंकि शाब्दिक अर्थ में, कोड सिर्फ एक ऑब्जेक्ट है)।

कॉलबैक फ़ंक्शन के रूप में एक फ़ंक्शन पास करना

एक फ़ंक्शन को एक तर्क के रूप में पास करना सरल है।

 //      callback function some_function(arg1, arg2, callback) { // ,       arg1  arg2 var my_number = Math.ceil(Math.random() * (arg1 - arg2) + arg2); //       callback,     callback(my_number); } //   some_function(5, 15, function (num) { //       callback- console.log("callback called! " + num); });

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

बाहर निकलने के लिए अव्यवस्था न करें

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

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

यहां एक अधिक विस्तृत उदाहरण है, जो एक्सएएमएक्स फ़ाइल को लोड करने के लिए AJAX का उपयोग करता है और अनुरोधित वस्तु के संदर्भ में कॉलबैक फ़ंक्शन को कॉल करने के लिए call() फ़ंक्शन का उपयोग करता है (इसका मतलब है कि जब हम कॉलबैक फ़ंक्शन के अंदर this को निर्दिष्ट करते हैं, तो यह अनुरोधित को संदर्भित करेगा। वस्तु):

 function some_function2(url, callback) { var httpRequest; //   XMLHttpRequest- if (window.XMLHttpRequest) { httpRequest = new XMLHttpRequest(); } else if (window.ActiveXObject) { //   Internet Explorer' httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } httpRequest.onreadystatechange = function () { //       //       if (httpRequest.readyState === 4 && httpRequest.status === 200) { callback.call(httpRequest.responseXML); //   } }; httpRequest.open('GET', url); httpRequest.send(); } //   some_function2("text.xml", function () { console.log(this); }); console.log("    ");

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

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

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

call() उपयोग call() बारे में महान बात यह call() कि हम स्वयं उस संदर्भ को सेट करते हैं जिसमें फ़ंक्शन निष्पादित होता है। इसका मतलब यह है कि जब हम अपने कॉलबैक फ़ंक्शन के अंदर this उपयोग करते हैं, तो यह संदर्भित करता है कि हम call() करने के लिए पहले तर्क के रूप में क्या पास करते call() । इस उदाहरण में, जब हमने अपने अनाम फ़ंक्शन के अंदर इसे संदर्भित किया, तो हमने AJAX अनुरोध से responseXML को संदर्भित किया।

अंत में, दूसरा कंसोल.लॉग अभिव्यक्ति को पहले निष्पादित किया जाएगा, क्योंकि कॉलबैक फ़ंक्शन को अनुरोध पूरा होने तक निष्पादित नहीं किया जाता है, और ऐसा होने तक, कोड के बाद के हिस्से चुपचाप निष्पादित करना जारी रखते हैं।

इसे लपेटो

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

कॉलबैक फ़ंक्शंस को समझना (कॉलबैक)

कार्य वस्तुएं हैं

कॉलबैक फ़ंक्शन के रूप में एक फ़ंक्शन पास करना

बाहर निकलने के लिए अव्यवस्था न करें

इसे लपेटो

More articles: