onClose

Метод onClose в библиотеке Noty отвечает за обработку события закрытия уведомления. Он позволяет выполнять определённые действия сразу после того, как уведомление исчезает с экрана, независимо от причины его закрытия — будь то автоматическое время показа (timeout), явное закрытие пользователем или программное закрытие через API.

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

Метод onClose задаётся при создании экземпляра уведомления через объект конфигурации:

new Noty({
    text: 'Пример уведомления',
    type: 'success',
    timeout: 3000,
    callbacks: {
        onClose: function() {
            console.log('Уведомление закрыто');
        }
    }
}).show();

Ключевой момент — onClose находится внутри объекта callbacks. Это позволяет объединять несколько событийных обработчиков для одного уведомления, таких как onShow, onClose, onClick и другие.

Параметры и контекст

Функция onClose вызывается без аргументов. Контекст выполнения (this) внутри обработчика ссылается на экземпляр уведомления Noty, что позволяет обращаться к его свойствам и методам:

new Noty({
    text: 'Закрытие уведомления',
    type: 'info',
    callbacks: {
        onClose: function() {
            console.log('Текст уведомления:', this.options.text);
        }
    }
}).show();

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

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

  1. Логирование закрытия уведомления Можно использовать для записи в консоль или отправки аналитики о взаимодействии пользователя с уведомлениями.
new Noty({
    text: 'Событие закрытия уведомления',
    type: 'warning',
    timeout: 5000,
    callbacks: {
        onClose: function() {
            console.log('Пользователь или таймер закрыл уведомление');
        }
    }
}).show();
  1. Удаление элементов DOM или очистка ресурсов Иногда уведомления создают временные элементы или данные. onClose удобно использовать для их удаления.
let tempDiv = document.createElement('div');
document.body.appendChild(tempDiv);

new Noty({
    text: 'Уведомление с очисткой DOM',
    type: 'alert',
    timeout: 4000,
    callbacks: {
        onClose: function() {
            tempDiv.remove();
            console.log('Временный элемент удалён');
        }
    }
}).show();
  1. Вызов пользовательских функций после закрытия Позволяет интегрировать Noty в более сложную логику приложения.
function afterCloseAction() {
    alert('Уведомление закрыто, продолжаем выполнение скрипта');
}

new Noty({
    text: 'Закрытие с пользовательской функцией',
    type: 'success',
    timeout: 3000,
    callbacks: {
        onClose: afterCloseAction
    }
}).show();

Взаимодействие с другими событиями

onClose можно комбинировать с другими событиями Noty:

  • onShow — когда уведомление появляется.
  • onClick — при клике на уведомление.
  • onHover — при наведении курсора.

Например, можно отслеживать полный жизненный цикл уведомления:

new Noty({
    text: 'Комбинированный пример',
    type: 'info',
    timeout: 2000,
    callbacks: {
        onShow: function() { console.log('Появилось'); },
        onClose: function() { console.log('Закрылось'); },
        onClick: function() { console.log('Кликнули'); }
    }
}).show();

Особенности поведения

  • onClose вызывается после того, как уведомление исчезло из DOM, что отличает его от onCloseClick, который срабатывает сразу при нажатии кнопки закрытия.
  • Если уведомление закрывается программно через noty.close(), onClose также срабатывает, что обеспечивает единообразную обработку всех сценариев закрытия.
  • В асинхронных сценариях внутри onClose можно выполнять действия, которые должны произойти только после того, как уведомление полностью удалено, например, запуск анимаций или переход на другой экран.

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

  • Использовать для очистки ресурсов, связанных с уведомлением.
  • Применять для аналитики пользовательского взаимодействия.
  • Не помещать в onClose длительные синхронные операции, чтобы не блокировать интерфейс.

Совместимость с динамическими уведомлениями

В проектах с большим количеством динамических уведомлений onClose помогает управлять памятью и DOM-элементами, предотвращая накопление «мертвых» элементов:

let notifications = [];

function showNotification(message) {
    let n = new Noty({
        text: message,
        timeout: 3000,
        callbacks: {
            onClose: function() {
                notifications = notifications.filter(item => item !== n);
            }
        }
    }).show();
    notifications.push(n);
}

showNotification('Первое уведомление');
showNotification('Второе уведомление');

Таким образом, массив notifications всегда содержит только активные уведомления, а закрытые автоматически удаляются из списка.

Оглавление