Автоматическое убийство старых уведомлений

Библиотека Noty предоставляет гибкие возможности для отображения уведомлений в веб-приложениях, включая автоматическое управление временем их существования на странице. Одной из ключевых функций является автоматическое удаление старых уведомлений после определённого времени или при превышении заданного количества сообщений.

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

Каждое уведомление в Noty может иметь параметр timeout, который определяет, через сколько миллисекунд уведомление будет автоматически закрыто.

new Noty({
    text: 'Данные успешно сохранены',
    type: 'success',
    timeout: 3000, // уведомление исчезнет через 3 секунды
    layout: 'topRight',
    theme: 'mint'
}).show();
  • timeout: false — уведомление не исчезает автоматически и требует ручного закрытия.
  • timeout: number — время в миллисекундах, по истечении которого уведомление исчезнет.
  • progressBar: true — визуальный индикатор оставшегося времени жизни уведомления.

Ограничение количества уведомлений на экране

Для предотвращения переполнения интерфейса большим количеством уведомлений можно использовать метод queue и ограничить их количество через глобальные параметры Noty:

Noty.overrideDefaults({
    maxVisible: 3 // одновременно на экране будет максимум 3 уведомления
});

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

Автоматическое закрытие по событию

Noty позволяет привязать закрытие уведомления к определённому событию, например после завершения анимации или при выполнении сетевого запроса:

let n = new Noty({
    text: 'Файл загружен',
    type: 'info',
    timeout: 5000,
    progressBar: true,
    callbacks: {
        onClose: function() {
            console.log('Уведомление закрыто');
        }
    }
}).show();

В объекте callbacks доступны следующие события:

  • onShow — при отображении уведомления
  • onClose — при его закрытии
  • onClick — при клике по уведомлению
  • afterClose — после полного завершения анимации исчезновения

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

Удаление всех уведомлений одновременно

Для массового закрытия всех уведомлений можно использовать статический метод Noty.closeAll():

Noty.closeAll();

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

Noty.closeAll('success'); // закроет только уведомления с типом success

Это обеспечивает быстрый контроль над интерфейсом при возникновении критических ситуаций или при смене контекста приложения.

Интеграция с динамическим контентом

При работе с динамическими событиями, например при получении уведомлений через WebSocket или API, удобно создавать уведомления с автоматическим закрытием и прогресс-баром:

function notifyUser(message, type = 'alert') {
    new Noty({
        text: message,
        type: type,
        timeout: 4000,
        layout: 'topRight',
        progressBar: true,
        killer: true // автоматически закрывает предыдущие уведомления перед показом нового
    }).show();
}
  • killer: true — закрывает все старые уведомления перед показом нового, предотвращая захламление интерфейса.

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

Noty поддерживает кастомные анимации для появления и исчезновения уведомлений через объект animation:

new Noty({
    text: 'Данные обновлены',
    type: 'success',
    timeout: 3000,
    animation: {
        open: 'animated bounceInRight',
        close: 'animated bounceOutRight'
    }
}).show();

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

Использование очереди уведомлений

Если необходимо управлять потоком уведомлений, можно использовать очередь queue Noty:

let myQueue = new Noty.Queue({
    maxVisible: 2
});

myQueue.add(new Noty({text: 'Сообщение 1', type: 'info', timeout: 2000}));
myQueue.add(new Noty({text: 'Сообщение 2', type: 'alert', timeout: 2000}));
myQueue.add(new Noty({text: 'Сообщение 3', type: 'success', timeout: 2000}));

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

Грамотное использование параметров timeout, killer, maxVisible и callbacks позволяет полностью автоматизировать процесс удаления устаревших уведомлений, поддерживая интерфейс чистым и удобным для пользователя.

Оглавление