Принцип работы очереди

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

Основные компоненты очереди

  1. Очередь уведомлений (queue) Каждое создаваемое уведомление помещается в глобальную очередь. Она хранит объекты уведомлений в порядке их добавления. Noty обрабатывает их по принципу first in, first out (FIFO), что гарантирует, что первое созданное уведомление будет показано первым.

  2. Активные уведомления (current) Noty отслеживает активные уведомления с помощью внутреннего массива или счетчика. Если количество активных уведомлений достигает заданного лимита (maxVisible), новые уведомления остаются в очереди до освобождения места.

  3. Обработчик отображения (show/close) Метод show() инициирует визуализацию уведомления. Если уведомление не может быть показано из-за превышения лимита, оно остаётся в очереди. Метод close() удаляет уведомление с экрана и автоматически инициирует проверку очереди на наличие следующих уведомлений.

Алгоритм обработки очереди

  1. Добавление уведомления:

    const n = new Noty({
    text: 'Сообщение',
    type: 'alert',
    timeout: 3000
}).show();

    При вызове show() объект уведомления регистрируется в очереди.

  2. Проверка текущих активных уведомлений:

    • Если количество активных уведомлений меньше maxVisible (по умолчанию 5), уведомление сразу отображается.
    • Если лимит достигнут, уведомление остаётся в очереди до освобождения места.

  3. Автоматическое продвижение очереди: При закрытии уведомления (close() или таймаут) библиотека проверяет очередь. Если в очереди есть ожидающие уведомления, следующее уведомление из начала очереди автоматически отображается.

Настройка очереди

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

  • queue – указание имени очереди. Несколько очередей могут существовать параллельно.
  • maxVisible – максимальное количество одновременно видимых уведомлений.
  • timeout – время жизни уведомления, после которого оно автоматически закрывается и освобождает место в очереди.
  • killer – при значении true все предыдущие уведомления текущей очереди будут закрыты при создании нового.

Пример с пользовательской очередью:

const n1 = new Noty({
    text: 'Первое сообщение',
    queue: 'customQueue',
    timeout: 2000
}).show();

const n2 = new Noty({
    text: 'Второе сообщение',
    queue: 'customQueue',
    timeout: 2000
}).show();

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

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

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

  • Предсказуемое отображение уведомлений – сообщения не накладываются друг на друга.
  • Контроль за количеством видимых уведомлений – предотвращает перегрузку интерфейса.
  • Упрощение управления уведомлениями – библиотека самостоятельно решает, какое уведомление показать следующим.

Расширенные возможности

  • Приоритетные уведомления Можно вручную добавлять уведомления в начало очереди с помощью кастомной логики, изменяя порядок их отображения.
  • Множественные очереди Поддержка нескольких очередей позволяет разделять уведомления по категориям (например, системные и пользовательские).
  • Интеграция с асинхронными событиями Очередь автоматически обрабатывает уведомления, возникающие в результате AJAX-запросов или WebSocket-событий, сохраняя порядок поступления сообщений.

Внутренние события очереди

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

  • onShow – срабатывает при отображении уведомления.
  • onClose – срабатывает при закрытии уведомления, инициируя показ следующего уведомления в очереди.
  • onAfterClose – позволяет выполнять дополнительные действия после удаления уведомления из DOM, например, обновление состояния очереди.

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

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

  • Ограничивать maxVisible до 3–5 уведомлений для удобства восприятия.
  • Использовать отдельные очереди для различных типов сообщений, чтобы предотвратить смешение критических и информационных уведомлений.
  • Настраивать timeout индивидуально для каждого типа уведомлений, учитывая их важность и контекст.

Очередь является ядром системы уведомлений Noty, обеспечивая плавное и управляемое отображение сообщений, минимизируя визуальный хаос и повышая удобство работы с интерфейсом.

Оглавление