Механизм очереди по умолчанию

Библиотека Toastify реализует механизм отображения уведомлений таким образом, чтобы они не перекрывали друг друга хаотично и не создавали визуальный шум. В основе лежит простая, но эффективная очередь, управляющая порядком появления и исчезновения toast-элементов.

По умолчанию каждый новый toast добавляется в стек уведомлений, который визуально выстраивается в выбранной области экрана (например, сверху справа). Очередь работает по принципу FIFO (First In, First Out) — первый показанный элемент первым покидает экран.

Добавление уведомлений в очередь

Каждый вызов Toastify() с последующим .showToast() инициирует создание нового DOM-элемента и его вставку в контейнер уведомлений. Если в момент вызова уже есть активные уведомления, новый элемент:

  • не заменяет существующие
  • не блокирует их
  • добавляется в конец визуального списка

Пример:

Toastify({ text: "Первое уведомление" }).showToast();
Toastify({ text: "Второе уведомление" }).showToast();
Toastify({ text: "Третье уведомление" }).showToast();

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

Управление временем жизни

Каждое уведомление имеет параметр duration, определяющий время его отображения. По истечении этого времени:

  1. Запускается анимация исчезновения
  2. Элемент удаляется из DOM
  3. Освобождается место для последующих уведомлений

Если уведомлений много, они не «ждут своей очереди» скрыто — все отображаются сразу, но исчезают по мере завершения своего жизненного цикла.

Пример с разным временем жизни:

Toastify({ text: "Короткое", duration: 2000 }).showToast();
Toastify({ text: "Длинное", duration: 5000 }).showToast();

В этом случае первое уведомление исчезнет раньше, даже если было добавлено раньше.

Визуальное смещение и стек

Очередь реализована через вертикальный стек с использованием CSS. Каждый новый toast:

  • получает абсолютное или фиксированное позиционирование
  • смещается относительно предыдущих элементов
  • не перекрывает их (если не превышено доступное пространство)

Это достигается за счёт контейнера, внутри которого элементы располагаются в колонку.

Ключевые особенности:

  • автоматическое перераспределение позиций после удаления элемента
  • отсутствие «прыжков» при исчезновении
  • плавные анимации смещения

Ограничения очереди

По умолчанию Toastify не ограничивает количество одновременно отображаемых уведомлений. Это означает:

  • при большом количестве вызовов можно получить длинный стек
  • уведомления могут выходить за пределы экрана
  • пользовательский интерфейс может перегружаться

В таких случаях требуется ручное управление очередью или внедрение дополнительной логики.

Поведение при быстрых последовательных вызовах

При множественных вызовах подряд:

for (let i = 1; i <= 10; i++) {
  Toastify({ text: `Сообщение ${i}` }).showToast();
}

Toastify:

  • создаёт все элементы практически мгновенно
  • добавляет их в DOM без задержек
  • выстраивает их в стек

Отсутствует встроенный механизм «паузы» между уведомлениями, поэтому визуально они появляются почти одновременно.

Влияние позиции на очередь

Параметры gravity и position определяют, где именно будет формироваться очередь:

Toastify({
  text: "Пример",
  gravity: "top", // top или bottom
  position: "right" // left, center, right
}).showToast();

Очередь формируется отдельно для каждой комбинации:

  • верхний правый угол — одна очередь
  • нижний левый угол — другая очередь

Это позволяет создавать независимые потоки уведомлений.

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

Если пользователь взаимодействует с уведомлением:

  • при close: true появляется кнопка закрытия
  • при клике уведомление удаляется из очереди раньше времени

Это влияет на стек:

  • элементы ниже автоматически поднимаются
  • очередь динамически перестраивается

Внутренний механизм удаления

Удаление toast происходит через:

  1. Добавление CSS-класса для анимации исчезновения
  2. Таймер завершения анимации
  3. Удаление элемента из DOM

Важно, что:

  • очередь не хранится как отдельная структура данных
  • фактическим источником истины является DOM

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

Управление переполнением

При необходимости ограничения количества уведомлений применяется внешний контроль:

const MAX_TOASTS = 3;
const activeToasts = [];

function showToast(message) {
  if (activeToasts.length >= MAX_TOASTS) {
    return;
  }

  const toast = Toastify({
    text: message,
    duration: 3000,
    callback: () => {
      activeToasts.shift();
    }
  });

  activeToasts.push(toast);
  toast.showToast();
}

Такой подход позволяет:

  • контролировать длину очереди
  • предотвращать перегрузку интерфейса
  • управлять порядком отображения

Особенности анимации в очереди

Каждое уведомление:

  • появляется с эффектом (fade/slide)
  • исчезает плавно
  • не блокирует анимации других элементов

При удалении:

  • элементы ниже сдвигаются вверх
  • используется CSS transition
  • нет резких изменений позиции

Отсутствие приоритизации

В стандартной реализации:

  • все уведомления равны по приоритету
  • нет механизма вставки «в начало»
  • нельзя прервать уже показанные уведомления

Для реализации приоритетов требуется:

  • собственная очередь
  • ручной контроль показа
  • возможное использование delay или chaining

Выводы по механизму очереди

  • очередь реализована через DOM-стек, а не через структуру данных
  • порядок строго соответствует порядку вызова
  • управление временем жизни происходит независимо для каждого элемента
  • отсутствуют встроенные ограничения и приоритеты
  • гибкость достигается через внешнюю логику, а не внутренние настройки

Такой подход делает Toastify лёгкой и быстрой библиотекой, но переносит ответственность за сложное управление очередью на разработчика.

Оглавление