La función de limpieza destroy()
Devuelva una función destroy desde una acción para limpiar listeners de eventos y observadores
La función de limpieza destroy() es una lección gratuita de Sveltejs Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Sveltejs Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Sveltejs Academy incluye 4 lecciones en total.
Por qué limpiar
Las acciones suelen añadir listeners u observadores. La limpieza evita fugas de memoria cuando el elemento se desmonta.
Devuelva destroy
Una acción puede devolver un objeto con una función destroy(). Svelte la llama al desmontar el elemento.
function listen(node) {
function onClick() { /* ... */ }
node.addEventListener("click", onClick);
return { destroy() { node.removeEventListener("click", onClick); } };
}Combine con recursos
Cualquier recurso que asigne (listeners, observadores, intervalos) debe liberarse en destroy.
destroy idempotente
destroy se llama una vez. Aun así, escríbalo de forma defensiva por si el desmontaje se repite.
Combine update y destroy
Devuelva ambos para cubrir todo el ciclo de vida: reaccione a los cambios de parámetros y limpie al desmontar el elemento.
Observadores
Pause y desconecte IntersectionObservers, ResizeObservers y MutationObservers en destroy.
Marcos de animación
Cancele cualquier bucle pendiente de requestAnimationFrame para evitar trabajo innecesario.
Limpieza asíncrona
destroy puede ser síncrono. Si necesita una limpieza asíncrona, inicie tareas de limpieza sin esperar a que terminen.
Perfilado de memoria
Utilice las herramientas de memoria del navegador para confirmar que las acciones liberan las referencias después del desmontaje.
Tipos de TypeScript
El tipo de retorno es ActionReturn<Params> de svelte/action.
Error común
Olvidar devolver destroy mantiene los listeners conectados después de que desaparezca el elemento. Asocie siempre add con remove.
Comprobación rápida
¿Cuándo se ejecuta destroy?
Resumen
Devuelva { destroy } desde su acción para limpiar los listeners y observadores al desmontar el elemento.
Preguntas frecuentes
¿La lección «La función de limpieza destroy()» es gratis?
Sí — el texto completo de «La función de limpieza destroy()» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Sveltejs Academy, actualiza a CoddyKit PRO. El curso de Sveltejs Academy incluye 4 lecciones en total.
¿Qué aprenderé en «La función de limpieza destroy()»?
Devuelva una función destroy desde una acción para limpiar listeners de eventos y observadores Practicas Sveltejs Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Sveltejs Academy?
No se requiere experiencia previa. Sveltejs Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «La función de limpieza destroy()»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Sveltejs Academy?
Sí. Cada lección de Sveltejs Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Sintaxis de la directiva use:
- Parámetros y actualizaciones de acciones
- La función de limpieza destroy()
- Acciones prácticas: clickOutside, tooltip y autofocus