ฟังก์ชันล้างทรัพยากร destroy()
ส่งคืนฟังก์ชัน destroy จาก action เพื่อล้างตัวรับฟังเหตุการณ์และตัวเฝ้าสังเกต
ฟังก์ชันล้างทรัพยากร destroy() เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
เหตุใดจึงต้องล้างทรัพยากร
คำสั่งต่าง ๆ มักเพิ่มตัวรับฟังเหตุการณ์หรือออบเซิร์ฟเวอร์ การล้างทรัพยากรจะป้องกันหน่วยความจำรั่วเมื่อองค์ประกอบถูกถอดออก
ส่งคืนฟังก์ชันทำลาย
คำสั่งสามารถส่งคืนออบเจ็กต์ที่มีฟังก์ชัน destroy() ได้ โดย Svelte จะเรียกใช้ฟังก์ชันนี้เมื่อถอดองค์ประกอบออก
function listen(node) {
function onClick() { /* ... */ }
node.addEventListener("click", onClick);
return { destroy() { node.removeEventListener("click", onClick); } };
}จับคู่กับทรัพยากร
สิ่งใดก็ตามที่คุณจัดสรรไว้ เช่น ตัวรับฟังเหตุการณ์ ออบเซิร์ฟเวอร์ และตัวจับเวลา ควรได้รับการปล่อยคืนในฟังก์ชันทำลาย
การทำลายแบบทำซ้ำได้อย่างปลอดภัย
ฟังก์ชันทำลายจะถูกเรียกหนึ่งครั้ง แต่ควรเขียนให้รองรับอย่างรัดกุม เผื่อมีการถอดองค์ประกอบออกซ้ำ
รวมการอัปเดตและการทำลาย
ส่งคืนทั้งสองอย่างเพื่อให้ครอบคลุมวงจรชีวิตทั้งหมด ได้แก่ ตอบสนองต่อการเปลี่ยนแปลงพารามิเตอร์และล้างทรัพยากรเมื่อถอดองค์ประกอบออก
ออบเซิร์ฟเวอร์
หยุดชั่วคราวและยกเลิกการเชื่อมต่อ IntersectionObservers, ResizeObservers และ MutationObservers ในฟังก์ชันทำลาย
เฟรมแอนิเมชัน
ยกเลิกการวนซ้ำของ requestAnimationFrame ที่กำลังรอดำเนินการ เพื่อหลีกเลี่ยงการทำงานที่สูญเปล่า
การล้างทรัพยากรแบบอะซิงโครนัส
ฟังก์ชันทำลายสามารถทำงานแบบซิงโครนัสได้ หากต้องล้างทรัพยากรแบบอะซิงโครนัส ให้เริ่มงานล้างทรัพยากรโดยไม่รอผลลัพธ์
การวิเคราะห์หน่วยความจำ
ใช้เครื่องมือหน่วยความจำของเบราว์เซอร์เพื่อยืนยันว่าคำสั่งปล่อยการอ้างอิงหลังจากถอดองค์ประกอบออกแล้ว
ชนิดข้อมูล TypeScript
ชนิดข้อมูลที่ส่งคืนคือ ActionReturn<Params> จาก svelte/action
ข้อผิดพลาดที่พบบ่อย
หากลืมส่งคืนฟังก์ชันทำลาย ตัวรับฟังเหตุการณ์จะยังคงติดอยู่หลังจากองค์ประกอบหายไป ควรจับคู่การเพิ่มกับการนำออกเสมอ
ตรวจสอบอย่างรวดเร็ว
ฟังก์ชันทำลายทำงานเมื่อใด
สรุปทบทวน
ส่งคืน { destroy } จากคำสั่งของคุณ เพื่อล้างตัวรับฟังเหตุการณ์และออบเซิร์ฟเวอร์เมื่อถอดองค์ประกอบออก
คำถามที่พบบ่อย
บทเรียน “ฟังก์ชันล้างทรัพยากร destroy()” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ฟังก์ชันล้างทรัพยากร destroy()” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ฟังก์ชันล้างทรัพยากร destroy()”
ส่งคืนฟังก์ชัน destroy จาก action เพื่อล้างตัวรับฟังเหตุการณ์และตัวเฝ้าสังเกต คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “ฟังก์ชันล้างทรัพยากร destroy()” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ไวยากรณ์คำสั่ง use:
- พารามิเตอร์และการอัปเดตของ Action
- ฟังก์ชันล้างทรัพยากร destroy()
- Action เชิงปฏิบัติ: clickOutside tooltip autofocus