Функция очистки destroy()
Возвращайте из действия функцию destroy для удаления обработчиков событий и наблюдателей
«Функция очистки destroy()» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 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()» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Функция очистки destroy()»?
Возвращайте из действия функцию destroy для удаления обработчиков событий и наблюдателей Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Функция очистки destroy()»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Синтаксис директивы use:
- Параметры и обновления действий
- Функция очистки destroy()
- Практические действия: clickOutside tooltip autofocus