HTML Academy · บทเรียน

connectedCallback และ disconnectedCallback

เรียกใช้โค้ดเมื่อองค์ประกอบกำหนดเองถูกเพิ่มหรือนำออกจาก DOM

บทเรียน 2 จาก 413 ขั้นตอน

connectedCallback และ disconnectedCallback เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

การเรียกกลับตามวงจรชีวิตขององค์ประกอบ

องค์ประกอบที่กำหนดเองมีจุดเชื่อมต่อสี่จุดตามวงจรชีวิต ได้แก่ connectedCallback, disconnectedCallback, attributeChangedCallback และ adoptedCallback จุดเหล่านี้สอดคล้องกับช่วงติดตั้ง ถอนการติดตั้ง และอัปเดตที่รู้จักกันดีในรูปแบบคอมโพเนนต์ทุกประเภท

connectedCallback ทำงานเมื่อแทรกองค์ประกอบ

connectedCallback จะทำงานทุกครั้งที่องค์ประกอบถูกแทรกลงในโครงสร้างต้นไม้ DOM นี่คือจุดที่เหมาะสำหรับอ่านแอตทริบิวต์ แสดงผลเนื้อหา เพิ่มตัวรับฟังเหตุการณ์ และเริ่มตัวจับเวลาหรือการสมัครรับข้อมูลใด ๆ

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 โหนดลูกอาจยังไม่อยู่ใน DOM เมื่อ connectedCallback ทำงาน (ตัวแยกวิเคราะห์ยังดำเนินการอยู่) ใช้ MutationObserver หรืออ่านโหนดลูกภายใน requestAnimationFrame หากต้องการเข้าถึงโหนดลูกที่ประกาศไว้

adoptedCallback

adoptedCallback จะทำงานเมื่อองค์ประกอบถูกย้ายไปยังเอกสารใหม่ (โดยทั่วไปผ่าน document.adoptNode) แอปส่วนใหญ่ไม่เคยใช้สิ่งนี้ — โดยหลักแล้วจะมีความสำคัญกับองค์ประกอบที่ย้ายระหว่างเฟรมฝังเท่านั้น

การใช้งานร่วมกับ AbortController

รูปแบบที่สะอาดคือ สร้าง AbortController ใน connectedCallback ส่ง { signal: this.controller.signal } ให้กับ addEventListener และ fetch ทุกตัว จากนั้นเรียก this.controller.abort() ใน disconnectedCallback เพื่อลบทั้งหมดพร้อมกัน

หลีกเลี่ยงงานหนักในตัวสร้าง

ตัวสร้างจะทำงานแม้แต่องค์ประกอบที่สร้างผ่าน document.createElement แล้วไม่เคยถูกแทรกเข้าไป ควรจำกัดตัวสร้างไว้ที่การกำหนดค่าเริ่มต้นของคุณสมบัติ และเลื่อนการแสดงผล การเรียกข้อมูล และการติดตั้งตัวรับฟังไปทำใน connectedCallback

ตรวจสอบความรู้

เหตุใดจึงควรตั้งค่าการสมัครรับข้อมูลและตัวจับเวลาใน connectedCallback แทนที่จะตั้งค่าในตัวสร้างขององค์ประกอบ

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุป

connectedCallback (การแทรก) และ disconnectedCallback (การนำออก) เป็นจุดเริ่มต้นและจุดสิ้นสุดของช่วงอายุการทำงานขององค์ประกอบ ตั้งค่าตัวรับฟัง ตัวจับเวลาแบบช่วงเวลา และคำขอเรียกข้อมูลใน connectedCallback แล้วรื้อถอนใน disconnectedCallback เพื่อป้องกันการรั่วไหล ทั้งสองฟังก์ชันอาจทำงานหลายครั้งได้ — ใช้ AbortController เพื่อล้างข้อมูลเป็นชุดอย่างสะอาด

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 40
บทเรียน: 159

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “connectedCallback และ disconnectedCallback” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “connectedCallback และ disconnectedCallback” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “connectedCallback และ disconnectedCallback”

เรียกใช้โค้ดเมื่อองค์ประกอบกำหนดเองถูกเพิ่มหรือนำออกจาก DOM คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “connectedCallback และ disconnectedCallback” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม

ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

การกำหนดองค์ประกอบด้วย customElements.define
connectedCallback และ disconnectedCallback
แอตทริบิวต์ที่สังเกตการณ์และ attributeChangedCallback
การขยายองค์ประกอบในตัว

← กลับไปที่ HTML Academy