connectedCallback dan disconnectedCallback
Jalankan kode saat elemen khusus ditambahkan ke atau dihapus dari DOM.
connectedCallback dan disconnectedCallback adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.
Panggilan Balik Siklus Hidup Elemen
Elemen kustom menyediakan empat pengait siklus hidup: connectedCallback, disconnectedCallback, attributeChangedCallback, dan adoptedCallback. Keempatnya mencerminkan titik pemasangan, pelepasan, dan pembaruan yang umum dalam model komponen apa pun.
connectedCallback Berjalan Saat Disisipkan
connectedCallback dijalankan setiap kali elemen disisipkan ke dalam pohon DOM. Inilah tempat yang tepat untuk membaca atribut, merender konten, memasang pendengar peristiwa, dan memulai pengatur waktu atau langganan.
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";
}
}Panggilan Ini Dapat Terjadi Lebih dari Sekali
Jika elemen dihapus lalu disisipkan kembali, connectedCallback dipanggil lagi pada setiap penyisipan. Idempotensi penting—lindungi inisialisasi yang seharusnya hanya berlangsung sekali dengan sebuah penanda, atau lakukan penyiapan lengkap setiap kali dan biarkan disconnectedCallback membongkarnya.
disconnectedCallback Dipanggil Saat Dihapus
disconnectedCallback berjalan ketika elemen dihapus dari DOM. Di sinilah Anda menghentikan interval, membatalkan pengambilan data, menghapus pendengar tingkat dokumen, dan melepaskan sumber daya apa pun yang jika tidak akan bocor.
disconnectedCallback() {
clearInterval(this.interval);
window.removeEventListener("resize", this.onResize);
}Pengumpulan Sampah dan Pendengar
Elemen dengan interval aktif, pendengar dokumen, atau janji yang belum terselesaikan tidak akan dibersihkan oleh pengumpulan sampah bahkan setelah diputuskan. Selalu pasangkan setiap langganan yang dibuat dalam connectedCallback dengan pembersihan dalam disconnectedCallback.
Penyambungan Kembali Setelah Dipindahkan
Memindahkan elemen dengan parentB.appendChild(element) mula-mula menghapusnya dari parentA, lalu menyisipkannya ke parentB. Peramban memanggil disconnectedCallback lalu connectedCallback. Bersiaplah untuk pembongkaran dan penyiapan sementara selama pemindahan.
Waktu Penyambungan Awal
Untuk elemen yang ditulis langsung dalam HTML, connectedCallback dipanggil selama penguraian awal, setelah konstruktor. Atribut sudah diuraikan pada saat ini, sehingga membaca this.getAttribute("name") di sini mengembalikan nilai dalam markah.
Anak Mungkin Belum Diuraikan
Untuk elemen dengan anak yang dideklarasikan dalam HTML, anak-anak tersebut mungkin belum berada di DOM saat connectedCallback dipanggil (penguraiannya masih berlangsung). Gunakan MutationObserver atau baca anak-anak di dalam requestAnimationFrame jika Anda perlu mengakses anak yang dideklarasikan.
adoptedCallback
adoptedCallback dipanggil ketika elemen dipindahkan ke dokumen baru (biasanya melalui document.adoptNode). Sebagian besar aplikasi tidak pernah menggunakannya—hal ini terutama penting untuk komponen yang dipindahkan antar-iframe.
Memasangkan dengan AbortController
Pola yang bersih: buat AbortController dalam connectedCallback, teruskan { signal: this.controller.signal } ke setiap addEventListener dan fetch, lalu panggil this.controller.abort() dalam disconnectedCallback untuk menghapus semuanya sekaligus.
Hindari Pekerjaan Berat dalam Konstruktor
Konstruktor tetap berjalan bahkan ketika elemen dibuat melalui document.createElement dan tidak pernah disisipkan. Batasi konstruktor untuk menetapkan nilai properti awal; tunda render, pengambilan data, dan pemasangan pendengar hingga connectedCallback.
Pemeriksaan Pengetahuan
Mengapa langganan dan pewaktu sebaiknya disiapkan dalam connectedCallback, bukan dalam konstruktor elemen?
Ringkasan
connectedCallback (penyisipan) dan disconnectedCallback (penghapusan) membatasi masa aktif elemen. Siapkan pendengar, interval, dan pengambilan data dalam connectedCallback; bongkar semuanya dalam disconnectedCallback untuk mencegah kebocoran. Keduanya dapat dipanggil berkali-kali—gunakan AbortController untuk pembersihan berkelompok yang rapi.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “connectedCallback dan disconnectedCallback” gratis?
Ya — teks lengkap “connectedCallback dan disconnectedCallback” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “connectedCallback dan disconnectedCallback”?
Jalankan kode saat elemen khusus ditambahkan ke atau dihapus dari DOM. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai HTML Academy?
Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “connectedCallback dan disconnectedCallback” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?
Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Mendefinisikan Elemen dengan customElements.define
- connectedCallback dan disconnectedCallback
- Atribut yang Diamati dan attributeChangedCallback
- Memperluas Elemen Bawaan