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

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

Общий принцип удаления уведомлений

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

Toastify добавляет уведомления в контейнер с классом:

.toastify

Или, если задан кастомный контейнер — в указанный пользователем элемент.

Базовый способ очистки

Удаление всех уведомлений через выборку элементов:

document.querySelectorAll('.toastify').forEach(toast => toast.remove());

Разбор:

  • querySelectorAll выбирает все элементы уведомлений
  • forEach перебирает их
  • remove() удаляет каждый элемент из DOM

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

Очистка через родительский контейнер

Если используется кастомный контейнер, логичнее очищать его содержимое:

const container = document.getElementById('toast-container');
container.innerHTML = '';

Преимущества:

  • Быстрее при большом количестве уведомлений
  • Минимум операций с DOM

Ограничения:

  • Работает только при централизованном размещении уведомлений
  • Требует явного контроля контейнера

Управление через ссылки на экземпляры

При создании уведомлений можно сохранять ссылки на их экземпляры:

const toasts = [];

const toast = Toastify({
  text: "Сообщение"
});

toasts.push(toast);
toast.showToast();

Очистка:

toasts.forEach(t => t.hideToast());
toasts.length = 0;

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

  • Используется метод hideToast()
  • Удаление происходит корректно с учётом анимации
  • Позволяет контролировать жизненный цикл уведомлений

Принудительная очистка с анимацией

Если требуется плавное удаление всех уведомлений:

document.querySelectorAll('.toastify').forEach(toast => {
  toast.classList.add('on'); // триггер скрытия
  setTimeout(() => toast.remove(), 400);
});

Пояснение:

  • Добавление класса инициирует CSS-анимацию скрытия
  • setTimeout синхронизирован с длительностью анимации

Очистка при навигации или смене состояния

В одностраничных приложениях важно очищать уведомления при переходах:

function clearToasts() {
  document.querySelectorAll('.toastify').forEach(t => t.remove());
}

Использование:

window.addEventListener('hashchange', clearToasts);

или в фреймворках:

useEffect(() => {
  return () => clearToasts();
}, []);

Очистка с фильтрацией

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

document.querySelectorAll('.toastify').forEach(toast => {
  if (toast.textContent.includes('Ошибка')) {
    toast.remove();
  }
});

Применение:

  • Удаление только ошибок или предупреждений
  • Контроль по содержимому или классам

Работа с пользовательскими классами

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

Toastify({
  text: "Уведомление",
  className: "custom-toast"
}).showToast();

Очистка только таких уведомлений:

document.querySelectorAll('.custom-toast').forEach(t => t.remove());

Очистка с учётом позиции

Toastify поддерживает разные позиции (top, bottom, left, right). Для очистки конкретной области:

document.querySelectorAll('.toastify.toastify-top').forEach(t => t.remove());

Потенциальные проблемы

1. Утечки памяти

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

2. Нарушение анимации

  • Прямое удаление (remove()) обрывает анимацию
  • Лучше использовать hideToast() при необходимости плавности

3. Несовместимость с кастомными контейнерами

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

Рекомендованные практики

  • Использовать централизованный менеджер уведомлений
  • Хранить ссылки на созданные экземпляры
  • Очищать уведомления при смене страницы
  • Разделять уведомления по типам через классы
  • Использовать анимацию при массовом удалении для лучшего UX

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

class ToastManager {
  constructor() {
    this.toasts = [];
  }

  show(options) {
    const toast = Toastify(options);
    this.toasts.push(toast);
    toast.showToast();
  }

  clearAll() {
    this.toasts.forEach(t => t.hideToast());
    this.toasts = [];
  }
}

Использование:

const manager = new ToastManager();

manager.show({ text: "Привет" });
manager.show({ text: "Ошибка" });

// Очистка всех
manager.clearAll();

Такой подход обеспечивает полный контроль над уведомлениями и упрощает их массовое управление.

Оглавление