Настройка задержки

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

Свойство timeout

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

Пример создания уведомления с задержкой 3 секунды:

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

Если timeout равен false, уведомление останется на экране до тех пор, пока его явно не закроют с помощью метода .close().

new Noty({
    text: 'Важное сообщение',
    type: 'alert',
    timeout: false
}).show();

Глобальная настройка времени отображения

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

Noty.overrideDefaults({
    timeout: 5000
});

new Noty({
    text: 'Сообщение с глобальной задержкой',
    type: 'information'
}).show();

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

Управление задержкой в процессе жизни уведомления

Noty позволяет изменять поведение задержки уже после показа уведомления. Метод setTimeout() динамически меняет время до автоматического закрытия.

let n = new Noty({
    text: 'Сообщение будет закрыто позже',
    timeout: 2000
}).show();

// Изменяем задержку на 5 секунд
n.setTimeout(5000);

Метод stop() приостанавливает обратный отсчет таймера закрытия, что полезно при взаимодействии пользователя с уведомлением (например, при наведении курсора).

let n = new Noty({
    text: 'Наведи курсор, чтобы задержать уведомление',
    timeout: 4000
}).show();

n.on('onMouseenter', function() {
    n.stop(); // пауза таймера
});

n.on('onMouseleave', function() {
    n.resume(); // продолжение таймера
});

Учет асинхронных действий

Задержка уведомлений может комбинироваться с асинхронными процессами. Например, закрытие уведомления после завершения AJAX-запроса:

let n = new Noty({
    text: 'Отправка данных...',
    type: 'information',
    timeout: false
}).show();

fetch('/api/save', { method: 'POST', body: JSON.stringify({data: 123}) })
    .then(response => response.json())
    .then(data => {
        n.setText('Данные успешно сохранены');
        n.setType('success');
        n.setTimeout(3000); // уведомление закроется через 3 секунды
    })
    .catch(() => {
        n.setText('Ошибка при сохранении');
        n.setType('error');
        n.setTimeout(5000);
    });

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

  • alert и warning – часто рекомендуется ставить timeout: false, чтобы пользователь успел ознакомиться с текстом.
  • success и information – обычно задаются небольшие задержки (2–5 секунд) для кратковременного информирования.
  • confirm – управляется собственными методами, а автоматическое закрытие чаще всего отключается (timeout: false), чтобы дать время пользователю принять решение.

Итоговые рекомендации по использованию timeout

  • Для кратких информационных сообщений оптимально 2–4 секунды.
  • Для сообщений, требующих внимания или действия пользователя, лучше отключить автоматическое закрытие.
  • Использование глобальной настройки Noty.overrideDefaults упрощает поддержание единообразия интерфейса.
  • Методы stop() и resume() позволяют управлять таймером в реальном времени при взаимодействии пользователя с уведомлением.

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

Оглавление