Количество одновременных уведомлений

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

Параметр maxVisible

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

new Noty({
    text: 'Пример уведомления',
    type: 'alert',
    maxVisible: 3, // максимум 3 уведомления одновременно
    timeout: 3000,
    layout: 'topRight'
}).show();

Ключевые моменты работы maxVisible:

  • Если новых уведомлений больше, чем значение maxVisible, они ставятся в очередь и отображаются только после закрытия или завершения времени показа предыдущих уведомлений.
  • Значение 0 или undefined трактуется как отсутствие ограничений: уведомления будут появляться все сразу.
  • Параметр работает глобально для конкретного layout. Для разных областей страницы (topRight, bottomLeft и т.д.) можно задавать свои максимумы через создание отдельных экземпляров Noty.

Поведение очереди уведомлений

Когда количество уведомлений достигает лимита maxVisible, библиотека Noty помещает последующие уведомления в внутреннюю очередь. Они автоматически появятся на экране в порядке добавления после того, как текущие уведомления исчезнут.

const notyQueue = [
    new Noty({ text: 'Первое', maxVisible: 2 }).show(),
    new Noty({ text: 'Второе', maxVisible: 2 }).show(),
    new Noty({ text: 'Третье', maxVisible: 2 }).show()
];

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

Особенности управления очередью:

  • Очередь обрабатывается по FIFO (first-in, first-out).
  • Можно явно закрывать уведомление через метод close(), чтобы дать место следующему уведомлению.
  • Очередь также учитывает таймауты и события закрытия (onClose), автоматически освобождая место для новых сообщений.

Настройка разных лимитов для разных позиций

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

new Noty({
    text: 'Верхний правый угол',
    layout: 'topRight',
    maxVisible: 3
}).show();

new Noty({
    text: 'Нижний левый угол',
    layout: 'bottomLeft',
    maxVisible: 1
}).show();

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

Динамическое изменение maxVisible

Параметр maxVisible можно менять в процессе работы приложения. Для этого необходимо управлять уведомлениями через отдельный объект или массив экземпляров:

let myNoty = new Noty({ text: 'Динамический лимит', maxVisible: 2 });
myNoty.setMaxVisible(4); // изменяем лимит на лету
myNoty.show();
  • Изменение лимита влияет только на новые уведомления, текущие остаются под старым ограничением.
  • Позволяет адаптировать интерфейс под разные сценарии: всплывающие предупреждения, системные сообщения, уведомления чата.

Практические рекомендации

  • Значение maxVisible следует подбирать в зависимости от размера уведомлений и площади интерфейса.
  • Для интерфейсов с множеством событий, где появляются частые уведомления, рекомендуется устанавливать ограничение в 2–4 уведомления, чтобы не перегружать пользователя.
  • В сочетании с параметром timeout можно создавать динамическую систему уведомлений с плавной заменой сообщений и минимальной нагрузкой на интерфейс.

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

Оглавление