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

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

Настройка глобального лимита

Основной способ управления количеством уведомлений — использование глобальной настройки maxWidth и maxVisible. Однако в контексте ограничения именно количества уведомлений ключевой параметр — limit. Он задается при инициализации или при вызове уведомления:

iziToast.settings({
    timeout: 5000,
    position: 'topRight',
    limit: 3
});

В этом примере одновременно на экране не будет больше трёх уведомлений. Любое последующее уведомление будет либо помещено в очередь, либо не показано в зависимости от настроек очереди.

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

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

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

iziToast.show({
    title: 'Ошибка',
    message: 'Произошла ошибка при загрузке данных',
    color: 'red',
    limit: 1
});

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

Поведение при превышении лимита

При превышении установленного лимита возможны несколько вариантов обработки:

  1. Очередь уведомлений: новые уведомления ставятся в очередь и показываются автоматически после закрытия предыдущих. Такой подход обеспечивает плавность и предотвращает перегрузку интерфейса.
  2. Отбрасывание лишних уведомлений: новые уведомления не появляются, если лимит достигнут. Это подходит для критических сообщений, которые не должны накапливаться.
  3. Замещение старых уведомлений: можно использовать параметр override с уникальными идентификаторами уведомлений, чтобы новое уведомление заменяло старое с тем же id.

Пример с уникальными id:

iziToast.show({
    id: 'uniqueNotification',
    title: 'Обновление',
    message: 'Новая версия доступна',
    timeout: 4000
});

Если уведомление с id: 'uniqueNotification' уже отображается, новый вызов заменит старое уведомление вместо добавления нового.

Управление лимитами через очередь

Для комплексного контроля часто используют очередь уведомлений, имитируя собственную очередь через массивы или встроенные callback-функции onClosing и onClosed:

let queue = [
    { title: 'Сообщение 1', message: 'Первое уведомление' },
    { title: 'Сообщение 2', message: 'Второе уведомление' },
    { title: 'Сообщение 3', message: 'Третье уведомление' },
];

function showNext() {
    if (queue.length === 0) return;
    const item = queue.shift();
    iziToast.show({
        title: item.title,
        message: item.message,
        onClosed: showNext
    });
}

showNext();

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

Рекомендации по использованию лимитов

  • Умеренность: оптимальное количество одновременно отображаемых уведомлений обычно 3–5. Больше — создаёт визуальный шум.
  • Приоритетность: важные уведомления должны иметь собственные id и limit, чтобы гарантированно появляться.
  • Автоочистка: использовать timeout для автоматического закрытия уведомлений, чтобы очередь не блокировалась.
  • Контроль по типам: разные типы уведомлений (ошибка, информация, успех) могут иметь отдельные лимиты для предотвращения конфликтов.

Примеры комплексного применения

iziToast.settings({
    position: 'topRight',
    timeout: 4000,
    limit: 4
});

iziToast.success({
    title: 'Успех',
    message: 'Данные успешно сохранены',
});

iziToast.error({
    id: 'error1',
    title: 'Ошибка',
    message: 'Не удалось загрузить данные',
    limit: 1
});

iziToast.info({
    title: 'Информация',
    message: 'Доступна новая версия',
});

В этом примере глобальный лимит 4 уведомления одновременно работает вместе с индивидуальным лимитом для уведомления об ошибке, что обеспечивает гибкий контроль отображения сообщений.

Оглавление