Städfunktionen destroy()
Returnera en destroy-funktion från en action för att rensa händelselyssnare och observers.
Städfunktionen destroy() är en gratis lektion i Sveltejs Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Sveltejs Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.
Varför rensning
Actions lägger ofta till lyssnare eller observatörer. Rensning förhindrar minnesläckor när elementet avmonteras.
Returnera destroy
En action kan returnera ett objekt med en destroy()-funktion. Svelte anropar den när elementet avmonteras.
function listen(node) {
function onClick() { /* ... */ }
node.addEventListener("click", onClick);
return { destroy() { node.removeEventListener("click", onClick); } };
}Kombinera med resurser
Allt som du allokerar (lyssnare, observatörer, intervall) ska frigöras i destroy.
Idempotent destroy
destroy anropas en gång. Skriv ändå koden defensivt ifall elementet avmonteras upprepade gånger.
Kombinera update och destroy
Returnera båda för en fullständig livscykel: reagera på parameterändringar och rensa upp när elementet avmonteras.
Observatörer
Pausa och koppla från IntersectionObservers, ResizeObservers och MutationObservers i destroy.
Animeringsramar
Avbryt alla väntande requestAnimationFrame-loopar för att undvika onödigt arbete.
Asynkron rensning
destroy kan vara synkron. Om du behöver asynkron rensning kan du starta rensningsuppgifter utan att invänta resultatet.
Minnesprofilering
Använd webbläsarens minnesverktyg för att bekräfta att actions frigör referenser när elementet avmonteras.
TypeScript-typer
Returtypen är ActionReturn<Params> från svelte/action.
Vanligt misstag
Om du glömmer att returnera destroy förblir lyssnarna kopplade efter att elementet har försvunnit. Para alltid ihop add med remove.
Snabb kontroll
När körs destroy?
Sammanfattning
Returnera { destroy } från din action för att rensa bort lyssnare och observatörer när elementet avmonteras.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 41
- Lektioner
- 163
Vanliga frågor
Är lektionen ”Städfunktionen destroy()” gratis?
Ja – hela texten till ”Städfunktionen destroy()” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Sveltejs Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Städfunktionen destroy()”?
Returnera en destroy-funktion från en action för att rensa händelselyssnare och observers. Ni övar på Sveltejs Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Sveltejs Academy?
Du behöver inga förkunskaper. Utbildningen i Sveltejs Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.
Hur lång tid tar lektionen ”Städfunktionen destroy()”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Sveltejs Academy-lektionen?
Ja. Varje Sveltejs Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Syntax för use:-direktivet
- Action-parametrar och uppdateringar
- Städfunktionen destroy()
- Praktiska actions: clickOutside tooltip autofocus