Уничтожение экземпляров

Библиотека iziToast предоставляет механизм управления жизненным циклом уведомлений, включая их программное удаление. Уничтожение экземпляров позволяет контролировать поведение интерфейса, предотвращать накопление уведомлений и освобождать ресурсы.

Общие принципы удаления

Каждое уведомление, созданное через iziToast, представляет собой DOM-элемент, добавленный в документ. Удаление уведомления может происходить:

  • автоматически (по истечении времени timeout)
  • по действию пользователя (клик по кнопке закрытия)
  • программно (через API библиотеки)

Контроль над уничтожением экземпляров особенно важен при динамических интерфейсах, где уведомления создаются часто.

Метод iziToast.destroy()

Глобальный метод destroy() полностью удаляет все уведомления и очищает контейнер библиотеки.

iziToast.destroy();

Особенности:

  • удаляет все активные уведомления
  • очищает DOM-контейнер .iziToast-wrapper
  • сбрасывает внутреннее состояние библиотеки

Применение:

  • при переходе между страницами в SPA
  • при очистке интерфейса перед повторной инициализацией
  • при завершении сценария, где уведомления больше не нужны

Метод iziToast.hide()

Метод hide() используется для удаления конкретного уведомления.

iziToast.hide({}, toastElement);

Параметры:

  • первый аргумент — объект настроек (может быть пустым)
  • второй аргумент — DOM-элемент уведомления

Пример:

iziToast.show({
    title: 'Сообщение',
    message: 'Это уведомление будет удалено вручную',
    timeout: false,
    onOpening: function(instance, toast) {
        setTimeout(function() {
            instance.hide({}, toast);
        }, 3000);
    }
});

Ключевые моменты:

  • позволяет точно управлять временем удаления
  • работает с конкретным экземпляром
  • может использоваться внутри колбэков

Использование идентификаторов

Для удобства управления уведомлениями можно сохранять ссылку на DOM-элемент:

let currentToast;

iziToast.show({
    title: 'Уведомление',
    message: 'Контролируемое уведомление',
    timeout: false,
    onOpening: function(instance, toast) {
        currentToast = toast;
    }
});

Позже уведомление можно удалить:

iziToast.hide({}, currentToast);

Удаление с анимацией и без

По умолчанию iziToast.hide() запускает анимацию скрытия. Управление этим поведением осуществляется через параметры:

iziToast.hide({
    transitionOut: 'fadeOut'
}, toastElement);

Популярные значения transitionOut:

  • fadeOut
  • fadeOutUp
  • fadeOutDown
  • bounceOut

Для мгновенного удаления можно использовать минимальную анимацию или задать timeout: 0 при создании.

Удаление по пользовательским действиям

Часто уведомления удаляются при взаимодействии:

iziToast.show({
    title: 'Удаление',
    message: 'Нажмите кнопку',
    buttons: [
        ['<button>Закрыть</button>', function (instance, toast) {
            instance.hide({}, toast);
        }]
    ]
});

Преимущества:

  • гибкость управления
  • возможность привязки логики к UI
  • улучшение UX

Автоматическое уничтожение через timeout

Параметр timeout задаёт время жизни уведомления:

iziToast.show({
    title: 'Автоудаление',
    message: 'Исчезнет через 5 секунд',
    timeout: 5000
});

Особенности:

  • значение указывается в миллисекундах
  • timeout: false отключает автоудаление
  • при наведении таймер может останавливаться (если включено pauseOnHover)

Массовое управление уведомлениями

При большом количестве уведомлений полезно управлять ими централизованно:

document.querySelector('#clearAll').addEventListener('click', function() {
    iziToast.destroy();
});

Или выборочно:

document.querySelectorAll('.iziToast').forEach(function(toast) {
    iziToast.hide({}, toast);
});

Уничтожение при смене состояния приложения

В SPA-приложениях важно удалять уведомления при навигации:

window.addEventListener('beforeunload', function() {
    iziToast.destroy();
});

Или при смене маршрута:

router.beforeEach((to, from, next) => {
    iziToast.destroy();
    next();
});

Очистка ресурсов и влияние на производительность

Несвоевременное удаление уведомлений может привести к:

  • накоплению DOM-элементов
  • утечкам памяти
  • ухудшению производительности

Рекомендации:

  • избегать timeout: false без необходимости
  • удалять уведомления после выполнения задач
  • использовать destroy() при полной очистке интерфейса

Внутренние механизмы удаления

При вызове hide() или destroy() библиотека:

  1. запускает CSS-анимацию скрытия
  2. удаляет элемент из DOM
  3. очищает обработчики событий
  4. обновляет внутренние коллекции уведомлений

Это гарантирует корректное освобождение ресурсов и отсутствие «висячих» элементов.

Комбинированные сценарии

Часто используются комбинированные подходы:

iziToast.show({
    title: 'Комбинированный сценарий',
    message: 'Удалится автоматически или вручную',
    timeout: 10000,
    buttons: [
        ['<button>Закрыть</button>', function (instance, toast) {
            instance.hide({}, toast);
        }]
    ]
});

Поведение:

  • уведомление исчезнет через 10 секунд
  • пользователь может закрыть его раньше

Обработка событий перед уничтожением

Библиотека предоставляет колбэки:

iziToast.show({
    title: 'События',
    message: 'Отслеживание удаления',
    onClosing: function(instance, toast, closedBy) {
        console.log('Закрытие:', closedBy);
    },
    onClosed: function(instance, toast, closedBy) {
        console.log('Удалено:', closedBy);
    }
});

Параметр closedBy может принимать значения:

  • timeout
  • button
  • drag
  • overlay
  • manual

Это позволяет реализовывать дополнительную логику при уничтожении.

Практические рекомендации

  • централизованно управлять уведомлениями через отдельный модуль
  • хранить ссылки на важные уведомления
  • избегать избыточного количества одновременно отображаемых сообщений
  • использовать destroy() при полной очистке UI
  • комбинировать автоматическое и ручное удаление

Контроль уничтожения экземпляров — важная часть работы с iziToast, позволяющая создавать отзывчивый, чистый и управляемый интерфейс.

Оглавление