connectedCallback और disconnectedCallback
कस्टम एलिमेंट को DOM में जोड़ने या हटाने पर कोड चलाएँ
connectedCallback और disconnectedCallback, CoddyKit पर HTML Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह HTML Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
तत्व जीवनचक्र कॉलबैक
कस्टम तत्व जीवनचक्र के चार हुक उपलब्ध कराते हैं: connectedCallback, disconnectedCallback, attributeChangedCallback और adoptedCallback। ये किसी भी कंपोनेंट मॉडल के परिचित माउंट, अनमाउंट और अपडेट बिंदुओं के समान होते हैं।
connectedCallback जोड़ने पर चलता है
connectedCallback हर बार तब चलता है जब तत्व को DOM ट्री में जोड़ा जाता है। एट्रिब्यूट पढ़ने, सामग्री render करने, इवेंट लिसनर जोड़ने और कोई भी टाइमर या सदस्यता शुरू करने के लिए यही उचित स्थान है।
class Timer extends HTMLElement {
connectedCallback() {
this.start = Date.now();
this.interval = setInterval(() => this.render(), 1000);
this.render();
}
render() {
this.textContent = Math.floor((Date.now() - this.start) / 1000) + "s";
}
}यह एक से अधिक बार चल सकता है
यदि एलिमेंट को हटाकर फिर से डाला जाता है, तो हर बार डालने पर connectedCallback दोबारा चलता है। इडेम्पोटेंसी महत्वपूर्ण है — जिस आरंभीकरण को केवल एक बार होना चाहिए, उसे किसी फ़्लैग से सुरक्षित रखें, या हर बार पूरा सेटअप करें और disconnectedCallback को समापन करने दें।
disconnectedCallback हटाए जाने पर चलता है
disconnectedCallback तब चलता है जब एलिमेंट को DOM से हटाया जाता है। यहीं पर अंतराल रोकें, फ़ेच अनुरोध रद्द करें, दस्तावेज़-स्तरीय श्रोताओं को हटाएँ और ऐसे सभी संसाधन मुक्त करें जो अन्यथा लीक हो सकते हैं।
disconnectedCallback() {
clearInterval(this.interval);
window.removeEventListener("resize", this.onResize);
}कचरा-संग्रह और श्रोता
सक्रिय अंतराल, दस्तावेज़ श्रोता या अधूरे प्रॉमिस वाला एलिमेंट, डिस्कनेक्ट होने के बाद भी कचरा-संग्रहित नहीं होगा। connectedCallback में बनाई गई हर सदस्यता को disconnectedCallback में की गई सफ़ाई के साथ हमेशा जोड़ा जाना चाहिए।
स्थानांतरित करने के बाद पुनः-संयोजन
parentB.appendChild(element) से एलिमेंट को स्थानांतरित करने पर पहले वह parentA से हटता है और फिर parentB में डाला जाता है। ब्राउज़र पहले disconnectedCallback और फिर connectedCallback चलाता है। स्थानांतरण के दौरान होने वाले अस्थायी समापन और पुनः-तैयारी के लिए योजना बनाएँ।
प्रारंभिक कनेक्शन का समय
HTML में सीधे लिखे गए एलिमेंट के लिए, प्रारंभिक पार्सिंग के दौरान, कंस्ट्रक्टर के बाद connectedCallback चलता है। इस समय तक विशेषताएँ पार्स हो चुकी होती हैं, इसलिए यहाँ this.getAttribute("name") पढ़ने पर मार्कअप का मान मिलता है।
बच्चे अभी पार्स न हुए हों
HTML में बच्चों के साथ घोषित एलिमेंट के लिए, connectedCallback चलने के समय बच्चे अभी DOM में न आए हों सकते हैं, क्योंकि पार्सर अभी काम कर रहा होता है। यदि आपको घोषित बच्चों तक पहुँचना आवश्यक हो, तो MutationObserver का उपयोग करें या बच्चों को requestAnimationFrame के अंदर पढ़ें।
adoptedCallback
adoptedCallback तब चलता है जब किसी एलिमेंट को नए दस्तावेज़ में ले जाया जाता है, आमतौर पर document.adoptNode के माध्यम से। अधिकांश ऐप्लिकेशन इसका उपयोग कभी नहीं करते — यह मुख्य रूप से iframe के बीच ले जाए जाने वाले कंपोनेंट के लिए महत्वपूर्ण है।
AbortController के साथ संयोजन
एक साफ़ तरीका यह है: connectedCallback में AbortController बनाएँ, हर addEventListener और fetch को { signal: this.controller.signal } दें, फिर disconnectedCallback में this.controller.abort() चलाकर उन सभी को एक साथ हटा दें।
कंस्ट्रक्टर में भारी काम से बचें
कंस्ट्रक्टर तब भी चलता है जब एलिमेंट document.createElement से बनाया गया हो और कभी डाला न गया हो। कंस्ट्रक्टर को केवल प्रारंभिक प्रॉपर्टी मान सेट करने तक सीमित रखें; रेंडरिंग, डेटा प्राप्त करना और श्रोता जोड़ना connectedCallback तक टाल दें।
ज्ञान-जाँच
सदस्यताओं और समय-सूचकों को एलिमेंट के कंस्ट्रक्टर में स्थापित करने के बजाय connectedCallback में क्यों स्थापित करना चाहिए?
सारांश
connectedCallback (डाला जाना) और disconnectedCallback (हटाया जाना) एलिमेंट की सक्रिय अवधि की सीमाएँ तय करते हैं। श्रोताओं, अंतरालों और फ़ेच अनुरोधों को connectedCallback में स्थापित करें; लीक रोकने के लिए उन्हें disconnectedCallback में हटा दें। दोनों कई बार चल सकते हैं — एक साथ साफ़-सफ़ाई के लिए AbortController का उपयोग करें।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 40
- पाठ
- 159
अक्सर पूछे जाने वाले प्रश्न
क्या “connectedCallback और disconnectedCallback” पाठ निःशुल्क है?
हाँ — HTML Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “connectedCallback और disconnectedCallback” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“connectedCallback और disconnectedCallback” में मैं क्या सीखूँगा?
कस्टम एलिमेंट को DOM में जोड़ने या हटाने पर कोड चलाएँ आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ HTML Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या HTML Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर HTML Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।
“connectedCallback और disconnectedCallback” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस HTML Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर HTML Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- customElements.define से एलिमेंट परिभाषित करना
- connectedCallback और disconnectedCallback
- देखे गए एट्रिब्यूट और attributeChangedCallback
- अंतर्निहित एलिमेंट का विस्तार