onClosing

В библиотеке iziToast событие onClosing играет ключевую роль при управлении жизненным циклом уведомлений. Оно срабатывает в момент, когда уведомление начинает закрываться, предоставляя возможность выполнить действия до того, как элемент будет полностью удалён из DOM.

Синтаксис и подключение

Событие передаётся в конфигурационный объект при создании уведомления:

iziToast.show({
    title: 'Информация',
    message: 'Уведомление закрывается',
    onClosing: function(instance, toast, closedBy){
        console.log('onClosing сработал', closedBy);
    }
});

Параметры функции:

  • instance — объект iziToast, через который можно управлять всеми активными уведомлениями.

  • toast — DOM-элемент уведомления, позволяющий изменять его стиль, содержимое или анимацию перед закрытием.

  • closedBy — строка, указывающая причину закрытия уведомления. Возможные значения:

    • 'timeout' — уведомление закрылось автоматически после установленного времени.
    • 'button' — закрытие произошло через пользовательскую кнопку.
    • 'overlay' — закрытие вызвано кликом по затемнению (overlay).
    • 'programmatic' — уведомление закрыто программно через метод iziToast.hide().

Примеры использования

Логирование причины закрытия

iziToast.show({
    title: 'Событие onClosing',
    message: 'Проверяем источник закрытия',
    timeout: 3000,
    onClosing: function(instance, toast, closedBy){
        console.log(`Уведомление закрыто методом: ${closedBy}`);
    }
});

В консоли можно увидеть, почему уведомление завершило своё существование. Это удобно при аналитике взаимодействия пользователя с уведомлениями.

Анимация при закрытии

С помощью toast можно добавлять кастомные эффекты:

iziToast.show({
    title: 'Анимация закрытия',
    message: 'Сдвигаем уведомление влево перед исчезновением',
    timeout: 4000,
    onClosing: function(instance, toast, closedBy){
        toast.style.transform = 'translateX(-100%)';
        toast.style.transition = 'transform 0.5s ease';
    }
});

Таким образом, onClosing позволяет добавлять динамические эффекты, влияя на визуальное восприятие уведомления.

Очистка ресурсов и таймеров

Если уведомление создаёт какие-либо таймеры или подписки, их стоит очищать в onClosing:

let timer = setInterval(() => console.log('Таймер работает'), 1000);

iziToast.show({
    title: 'Очистка ресурсов',
    message: 'Таймер остановится при закрытии',
    timeout: 5000,
    onClosing: function(instance, toast, closedBy){
        clearInterval(timer);
        console.log('Таймер очищен');
    }
});

Это предотвращает утечки памяти при частом использовании уведомлений.

Особенности и рекомендации

  1. Асинхронные действия: можно выполнять асинхронные операции, но закрытие уведомления не ждёт их завершения. Если требуется задержка, нужно использовать setTimeout внутри onClosing.
  2. Изменение DOM: изменения стилей или контента через toast должны быть плавными, чтобы не нарушить анимацию закрытия.
  3. Сочетание с onClosed: onClosing срабатывает до удаления элемента, а onClosed — после. Для логики очистки ресурсов чаще используют onClosing, а для финальных действий — onClosed.

Важные нюансы

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

Событие onClosing обеспечивает гибкий контроль над уведомлениями, позволяя интегрировать визуальные эффекты, очистку ресурсов и анализ поведения пользователя до того, как уведомление исчезнет с экрана.

Оглавление