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

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

Параметр timeout

Параметр timeout определяет, через сколько миллисекунд уведомление будет автоматически скрыто. Его использование выглядит следующим образом:

new Noty({
    text: 'Успешная операция',
    type: 'success',
    timeout: 3000 // уведомление закроется через 3 секунды
}).show();

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

  • Значение 0 или false отключает автоматическое закрытие.
  • Любое положительное число задаёт интервал в миллисекундах.
  • Если timeout не указан, уведомление остаётся на экране до ручного закрытия.

Взаимодействие с кнопкой закрытия

Noty позволяет добавить кнопку закрытия через параметр closeWith. При использовании timeout вместе с кнопкой закрытия поведение уведомления остаётся корректным:

new Noty({
    text: 'Файл загружен',
    type: 'info',
    timeout: 5000,
    closeWith: ['click', 'button'] // уведомление можно закрыть вручную или по таймеру
}).show();

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

Управление временем через события

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

  • onShow – срабатывает при отображении уведомления.
  • onClose – срабатывает перед удалением уведомления.
  • onHover – может использоваться для временной приостановки таймера.

Пример временной паузы таймера при наведении курсора:

let notification = new Noty({
    text: 'Сохраняем данные...',
    type: 'alert',
    timeout: 4000
}).show();

notification.on('onHover', function() {
    notification.stop(); // остановка таймера
});

notification.on('onMouseLeave', function() {
    notification.resume(); // возобновление таймера
});

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

Динамическая настройка timeout

Значение таймера можно изменять после создания уведомления через методы setTimeout и stop/resume:

let n = new Noty({
    text: 'Загрузка...',
    timeout: 5000
}).show();

// Изменить таймер на 10 секунд
n.setTimeout(10000);

// Остановить таймер
n.stop();

// Возобновить таймер
n.resume();

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

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

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

Noty.overrideDefaults({
    timeout: 4000
});

new Noty({ text: 'Первое уведомление', type: 'success' }).show();
new Noty({ text: 'Второе уведомление', type: 'warning' }).show();

Все уведомления закроются автоматически через 4 секунды, обеспечивая чистый интерфейс.

Особенности взаимодействия с разными типами уведомлений

  • alert и warning – часто используют короткие таймеры, чтобы не мешать пользователю.
  • success – рекомендуется показывать немного дольше, чтобы пользователь успел заметить подтверждение действия.
  • error – лучше оставить открытым до ручного закрытия, чтобы пользователь не пропустил сообщение о критической проблеме.

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

Оглавление