Удаление уведомлений из очереди

Библиотека Toastify реализует уведомления по принципу очереди: каждое новое сообщение добавляется в стек и отображается либо одновременно с другими, либо с учётом заданных ограничений (например, максимального количества уведомлений на экране).

Очередь формируется автоматически при вызове Toastify({...}).showToast(). Однако управление этой очередью — важная часть пользовательского интерфейса, особенно при работе с большим количеством событий.

Автоматическое удаление уведомлений

По умолчанию уведомления исчезают автоматически через заданный интервал времени:

Toastify({
  text: "Данные сохранены",
  duration: 3000
}).showToast();

Ключевые параметры:

  • duration — время жизни уведомления в миллисекундах
  • close: true — добавляет кнопку закрытия
  • stopOnFocus: true — приостанавливает таймер при наведении

После истечения времени уведомление удаляется из DOM и, соответственно, из визуальной очереди.

Принудительное удаление уведомлений

Каждый вызов Toastify() возвращает экземпляр уведомления, который можно сохранить в переменной:

const toast = Toastify({
  text: "Загрузка..."
});

toast.showToast();

Удаление выполняется методом:

toast.hideToast();

Особенности:

  • Уведомление исчезает немедленно, независимо от duration
  • Запускается анимация скрытия
  • Элемент удаляется из DOM после завершения анимации

Управление очередью через ссылки на уведомления

Для управления несколькими уведомлениями удобно хранить ссылки на них:

const notifications = [];

function addNotification(message) {
  const toast = Toastify({
    text: message,
    duration: -1 // бесконечное отображение
  });

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

Удаление всех уведомлений:

function clearAllNotifications() {
  notifications.forEach(toast => toast.hideToast());
  notifications.length = 0;
}

Такой подход позволяет реализовать полный контроль над очередью.

Ограничение количества уведомлений

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

Пример ограничения:

const maxToasts = 3;
const queue = [];

function showToast(message) {
  if (queue.length >= maxToasts) {
    const oldest = queue.shift();
    oldest.hideToast();
  }

  const toast = Toastify({
    text: message,
    duration: 5000
  });

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

Принцип работы:

  • При превышении лимита удаляется самое старое уведомление
  • Новое добавляется в конец очереди

Очередь с отложенным отображением

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

const queue = [];
let isShowing = false;

function processQueue() {
  if (queue.length === 0) {
    isShowing = false;
    return;
  }

  isShowing = true;

  const toast = queue.shift();

  toast.showToast();

  setTimeout(() => {
    processQueue();
  }, toast.options.duration || 3000);
}

function enqueueToast(message) {
  const toast = Toastify({
    text: message,
    duration: 3000
  });

  queue.push(toast);

  if (!isShowing) {
    processQueue();
  }
}

Результат:

  • Одновременно отображается только одно уведомление
  • Остальные ожидают своей очереди

Удаление уведомлений по событию

Удаление можно привязать к пользовательским действиям:

const toast = Toastify({
  text: "Ошибка! Нажмите для закрытия",
  duration: -1,
  onClick: function() {
    toast.hideToast();
  }
});

toast.showToast();

Также можно использовать внешние события:

document.getElementById("cancelBtn").addEventListener("click", () => {
  toast.hideToast();
});

Работа с DOM для массового удаления

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

document.querySelectorAll(".toastify").forEach(el => el.remove());

Недостатки подхода:

  • Обходит встроенные механизмы анимации
  • Не вызывает внутренние обработчики
  • Может привести к рассинхронизации состояния

Обработка завершения уведомления

Для отслеживания удаления используется колбэк callback:

Toastify({
  text: "Готово",
  duration: 3000,
  callback: function() {
    console.log("Уведомление удалено");
  }
}).showToast();

Применение:

  • Очистка ресурсов
  • Запуск следующего уведомления
  • Логирование событий

Очистка очереди при смене состояния приложения

При переходе между страницами или изменении состояния интерфейса полезно очищать очередь:

function resetNotifications(queue) {
  queue.forEach(toast => toast.hideToast());
  queue.length = 0;
}

Типичные сценарии:

  • переход между SPA-страницами
  • выход пользователя из системы
  • смена контекста (например, проект или документ)

Сравнение подходов удаления

Подход Контроль Анимация Гибкость
duration низкий есть низкая
hideToast() высокий есть высокая
управление массивом высокий есть очень высокая
прямое удаление из DOM полный нет опасная

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

  • Для единичных уведомлений достаточно duration
  • Для сложных интерфейсов — хранение ссылок и управление массивом
  • Для строгого UX — реализация собственной очереди
  • Прямое удаление через DOM допустимо только в крайних случаях

Контроль удаления уведомлений — ключ к предсказуемому поведению интерфейса и стабильной работе пользовательских сценариев.

Оглавление