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

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

Причины ограничения

Основные факторы, требующие ограничения:

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

Базовый подход к ограничению

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

Основной принцип:

  1. Вести учет активных уведомлений
  2. Перед созданием нового проверять текущее количество
  3. При достижении лимита — либо блокировать, либо удалять старые

Реализация через счетчик

Простейший способ — использование переменной-счетчика:

let activeToasts = 0;
const MAX_TOASTS = 3;

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

  activeToasts++;

  Toastify({
    text: message,
    duration: 3000,
    close: true,
    callback: function() {
      activeToasts--;
    }
  }).showToast();
}

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

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

Использование очереди уведомлений

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

const queue = [];
let activeToasts = 0;
const MAX_TOASTS = 3;

function processQueue() {
  if (queue.length === 0 || activeToasts >= MAX_TOASTS) return;

  const message = queue.shift();
  activeToasts++;

  Toastify({
    text: message,
    duration: 3000,
    close: true,
    callback: function() {
      activeToasts--;
      processQueue();
    }
  }).showToast();
}

function enqueueToast(message) {
  queue.push(message);
  processQueue();
}

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

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

Стратегия удаления старых уведомлений

Альтернативный подход — удаление старых уведомлений при превышении лимита.

const toasts = [];
const MAX_TOASTS = 3;

function showToast(message) {
  if (toasts.length >= MAX_TOASTS) {
    const oldToast = toasts.shift();
    oldToast.hideToast();
  }

  const toast = Toastify({
    text: message,
    duration: 3000,
    close: true
  });

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

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

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

Работа с DOM для контроля

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

function getActiveToasts() {
  return document.querySelectorAll('.toastify').length;
}

function showToast(message) {
  if (getActiveToasts() >= 3) return;

  Toastify({
    text: message,
    duration: 3000
  }).showToast();
}

Недостатки:

  • зависимость от внутренней структуры библиотеки
  • менее гибкий контроль

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

В сложных системах используется приоритетная система:

const queue = [];

function enqueueToast(message, priority = 0) {
  queue.push({ message, priority });
  queue.sort((a, b) => b.priority - a.priority);
  processQueue();
}

Применение:

  • ошибки → высокий приоритет
  • уведомления → средний
  • информационные → низкий

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

Разделение лимитов по категориям:

const limits = {
  error: 2,
  info: 3
};

const active = {
  error: 0,
  info: 0
};

function showToast(type, message) {
  if (active[type] >= limits[type]) return;

  active[type]++;

  Toastify({
    text: message,
    duration: 3000,
    callback: function() {
      active[type]--;
    }
  }).showToast();
}

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

Иногда ограничение достигается за счет уменьшения времени отображения:

Toastify({
  text: "Короткое уведомление",
  duration: 1500
}).showToast();

Комбинация короткого времени и лимита снижает вероятность накопления.

Дебаунс и троттлинг

При частых событиях (например, логировании):

let lastToastTime = 0;
const DELAY = 1000;

function showToast(message) {
  const now = Date.now();

  if (now - lastToastTime < DELAY) return;

  lastToastTime = now;

  Toastify({
    text: message,
    duration: 3000
  }).showToast();
}

Типичные ошибки

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

Комбинированный подход

На практике используется комбинация:

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

Такой подход обеспечивает баланс между информативностью и удобством интерфейса.

Оглавление