Параметр killer

В библиотеке Noty параметр killer используется для управления поведением уведомлений при одновременном появлении нескольких нотификаций. Его основная задача — предотвратить визуальный хаос и обеспечить более аккуратное отображение сообщений на странице.

Основное назначение

killer определяет, будут ли существующие уведомления удалены при показе нового. Если его значение установлено в true, то при вызове новой нотификации все предыдущие исчезают. Это особенно полезно в сценариях, когда важно, чтобы пользователь видел только актуальное сообщение, без накопления устаревших уведомлений.

Синтаксис

new Noty({
    text: 'Новое уведомление',
    type: 'success',
    killer: true,
    timeout: 3000
}).show();
  • text — текст уведомления.
  • type — тип сообщения (alert, success, warning, error, info).
  • killer — логическое значение (true или false).
  • timeout — время отображения в миллисекундах.

Поведение при разных значениях

  1. killer: false (по умолчанию) Каждое новое уведомление добавляется поверх предыдущих, создавая «стопку» сообщений. Старые уведомления остаются видимыми до тех пор, пока не истечет их timeout или пользователь их не закроет вручную.

  2. killer: true Все существующие уведомления мгновенно закрываются, а на их месте появляется новое. При этом закрытие старых уведомлений происходит с использованием стандартной анимации, если она настроена. Это позволяет поддерживать интерфейс чистым и предотвращает накопление большого числа всплывающих сообщений.

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

  • Комбинация с timeout Если killer: true и указано время timeout, новая нотификация заменит предыдущие, но сама она будет видна столько, сколько указано в timeout.

  • Анимации закрытия При включенном killer старые уведомления не исчезают мгновенно без анимации, если в настройках Noty активированы анимации animation.open и animation.close.

  • Глобальные и локальные уведомления Параметр killer работает как на уровне отдельных уведомлений, так и на уровне глобальной конфигурации библиотеки через Noty.overrideDefaults. Это позволяет задавать поведение по умолчанию для всех уведомлений на проекте.

Noty.overrideDefaults({
    killer: true,
    timeout: 4000
});
  • В этом примере любое новое уведомление автоматически закрывает старые, даже если killer не указан при создании конкретной нотификации.

Примеры практического применения

  1. Ошибка при отправке формы Когда пользователь многократно нажимает кнопку отправки формы, использование killer: true предотвращает накопление множества уведомлений об ошибке.
new Noty({
    text: 'Ошибка отправки формы!',
    type: 'error',
    killer: true,
    timeout: 5000
}).show();
  1. Информационные сообщения о состоянии системы Для системных сообщений, которые обновляются каждые несколько секунд (например, статус загрузки), параметр killer позволяет показывать только актуальную информацию.
function showSystemStatus(message) {
    new Noty({
        text: message,
        type: 'info',
        killer: true,
        timeout: 3000
    }).show();
}
  1. Комбинация с пользовательским закрытием Даже при включенном killer пользователь может закрыть уведомление вручную, что не повлияет на последующие сообщения. Новое уведомление все равно закроет предыдущие автоматически.

Рекомендации по использованию

  • Для уведомлений, требующих внимания пользователя: killer: true уменьшает визуальный шум и позволяет сосредоточиться на последнем сообщении.
  • Для накопительных уведомлений, например логов действий: оставлять killer: false, чтобы сохранить историю.
  • Совместимость с другими параметрами: особенно полезно в сочетании с modal или layout, чтобы контролировать одновременное отображение уведомлений в разных областях экрана.

Использование killer делает интерфейс более управляемым и предотвращает перегрузку визуального пространства, особенно при интенсивном взаимодействии пользователя с веб-приложением.

Оглавление