Параметр timeout

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

Синтаксис

new Noty({
    text: 'Сообщение успешно отправлено',
    type: 'success',
    timeout: 3000 // 3 секунды
}).show();

В данном примере уведомление автоматически закроется через 3 секунды.

Особенности использования

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

    • Если timeout указан числом, Noty через это время вызовет метод закрытия уведомления close().
    • Значение 0 отключает автоматическое закрытие, что удобно для сообщений, которые требуют внимания пользователя.

  2. Влияние на взаимодействие

    • Если пользователь наведет курсор на уведомление, оно может оставаться на экране дольше, в зависимости от настроек progressBar и dismissQueue.
    • Можно комбинировать с событиями onHover и onClick, чтобы динамически изменять время отображения.

  3. Анимация закрытия

    • Параметр timeout влияет на время запуска анимации закрытия. Noty плавно уменьшает непрозрачность уведомления и удаляет его из DOM.
    • Если необходимо полностью контролировать анимацию, можно использовать animation в связке с timeout.

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

Уведомление с мгновенным исчезновением

new Noty({
    text: 'Данные обновлены',
    type: 'info',
    timeout: 1000 // уведомление исчезнет через 1 секунду
}).show();

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

new Noty({
    text: 'Ошибка подключения к серверу',
    type: 'error',
    timeout: 0 // пользователь должен закрыть уведомление вручную
}).show();

Динамическое изменение времени отображения

let notification = new Noty({
    text: 'Загрузка данных...',
    type: 'alert',
    timeout: 5000
}).show();

// Увеличение времени отображения на 3 секунды
setTimeout(() => {
    notification.setTimeout(8000);
}, 2000);

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

Взаимодействие с progressBar

  • Параметр timeout тесно связан с индикатором прогресса progressBar.
  • progressBar показывает визуальное сокращение оставшегося времени до закрытия уведомления.
  • Если timeout равен 0, индикатор прогресса не отображается, так как уведомление не закрывается автоматически.
new Noty({
    text: 'Сохраняем данные...',
    type: 'warning',
    timeout: 4000,
    progressBar: true
}).show();

Рекомендации по настройке

  • Для уведомлений с важной информацией (ошибки, предупреждения) лучше использовать timeout: 0 или увеличенные значения.
  • Для информационных уведомлений, подтверждающих действие пользователя, достаточно 2–5 секунд.
  • При множественных уведомлениях использовать небольшие timeout значения для снижения перегрузки интерфейса.

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

  • success – обычно короткое время отображения (2–3 сек).
  • error и warning – желательно оставить на экране дольше (5–10 сек или 0).
  • info – гибкий вариант, зависит от контекста, 2–4 сек часто достаточно.

Методы управления timeout

  • setTimeout(ms) – динамическая установка нового времени жизни уведомления.
  • close() – немедленное закрытие, независимо от timeout.
  • stop() – временная приостановка таймера закрытия (например, при наведении мыши).
let n = new Noty({ text: 'Обновление...', timeout: 5000 }).show();

// При наведении мыши остановка таймера
n.on('mouseenter', function() { n.stop(); });

// При уходе мыши возобновление таймера
n.on('mouseleave', function() { n.setTimeout(3000); });

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

Оглавление