onClosed

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

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

Событие onClosed передается в объект настроек при создании уведомления:

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

Параметры функции обратного вызова:

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

  • toast — DOM-элемент уведомления, который был удален.

  • closedBy — строка, указывающая причину закрытия:

    • 'timeout' — закрыто автоматически по истечении таймера;
    • 'button' — закрыто нажатием на кнопку закрытия;
    • 'click' — закрыто кликом по уведомлению (если включена опция closeOnClick);
    • 'overlay' — закрыто кликом по затемнению (если используется overlay);
    • 'api' — закрыто программно через iziToast.destroy() или iziToast.hide().

Отличия onClosed от onClosing

  • onClosing вызывается до начала анимации скрытия, что удобно для изменения стилей или подготовки данных перед закрытием.
  • onClosed вызывается после полной анимации и удаления уведомления, что обеспечивает безопасное выполнение любых действий, связанных с DOM, без риска обращения к удаленному элементу.

Пример различия:

iziToast.show({
    title: 'Пример',
    message: 'onClosing и onClosed',
    timeout: 2000,
    onClosing: function(instance, toast, closedBy){
        console.log('Начало закрытия:', closedBy);
    },
    onClosed: function(instance, toast, closedBy){
        console.log('Уведомление полностью закрыто:', closedBy);
    }
});

Практические сценарии использования

  1. Логирование причин закрытия уведомлений
iziToast.show({
    title: 'Событие onClosed',
    message: 'Отслеживание закрытия',
    timeout: 4000,
    onClosed: function(instance, toast, closedBy){
        console.log(`Уведомление закрыто через: ${closedBy}`);
    }
});
  1. Очистка ресурсов и удаление динамического контента

Если уведомление содержит динамически созданные элементы (например, видео или графики), их следует удалять в onClosed, чтобы избежать утечек памяти.

iziToast.show({
    title: 'Видео уведомление',
    message: 'Закрытие приведет к удалению видео',
    timeout: 5000,
    onClosed: function(instance, toast, closedBy){
        const video = toast.querySelector('video');
        if(video){
            video.pause();
            video.src = '';
            video.remove();
        }
    }
});
  1. Вызов других уведомлений после закрытия
iziToast.show({
    title: 'Первое уведомление',
    message: 'Будет закрыто через 3 секунды',
    timeout: 3000,
    onClosed: function(instance, toast, closedBy){
        iziToast.show({
            title: 'Второе уведомление',
            message: 'Появилось после закрытия первого',
            timeout: 3000
        });
    }
});
  1. Синхронизация с сервером

Можно использовать onClosed для отправки статистики о действиях пользователей:

iziToast.show({
    title: 'Отслеживание',
    message: 'Отправка данных на сервер',
    timeout: 2000,
    onClosed: function(instance, toast, closedBy){
        fetch('/log-toast-close', {
            method: 'POST',
            body: JSON.stringify({ closedBy }),
            headers: { 'Content-Type': 'application/json' }
        });
    }
});

Настройки, влияющие на onClosed

Некоторые параметры уведомления могут менять поведение события:

  • timeout — если выставлено 0, уведомление не закрывается автоматически, и onClosed будет вызвано только при ручном закрытии или программном удалении.
  • closeOnClick — определяет, будет ли клик по уведомлению инициировать закрытие и вызов onClosed.
  • overlay — использование затемнения позволяет отслеживать закрытие через клик по overlay.

Работа с несколькими уведомлениями

Событие onClosed вызывается для каждого отдельного уведомления. При создании очереди уведомлений можно использовать его для последовательного управления:

iziToast.show({
    title: '1/2',
    message: 'Первое уведомление',
    timeout: 2000,
    onClosed: function(){
        iziToast.show({
            title: '2/2',
            message: 'Второе уведомление после закрытия первого',
            timeout: 2000
        });
    }
});

Рекомендации по использованию

  • Использовать onClosed для действий, которые требуют гарантированного удаления элемента из DOM.
  • Не менять состояние уведомления внутри onClosed, так как уведомление уже удалено.
  • Для подготовки к закрытию или анимации лучше использовать onClosing.
  • Комбинировать с closedBy для точного контроля логики в зависимости от способа закрытия.

onClosed обеспечивает полный контроль над жизненным циклом уведомлений, позволяя надежно управлять DOM, ресурсами и последовательностью действий после скрытия уведомлений.

Оглавление