Дублирование и предотвращение дубликатов

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

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

При стандартном вызове iziToast.show() каждый вызов создаёт новое уведомление, независимо от того, идентично ли оно предыдущему. Например:

iziToast.show({
    title: 'Ошибка',
    message: 'Невозможно сохранить данные'
});

iziToast.show({
    title: 'Ошибка',
    message: 'Невозможно сохранить данные'
});

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

Использование идентификаторов (id) для уникальности

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

iziToast.show({
    id: 'save-error',
    title: 'Ошибка',
    message: 'Невозможно сохранить данные',
    position: 'topRight'
});

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

iziToast.show({
    id: 'save-error',
    title: 'Ошибка',
    message: 'Невозможно сохранить данные',
    position: 'topRight'
});

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

Программное управление дубликатами

В случаях, когда требуется более сложная логика, можно проверять наличие уведомления перед его созданием. iziToast предоставляет метод getAll() для получения списка текущих уведомлений:

const notifications = iziToast.getAll();
const exists = notifications.some(n => n.id === 'save-error');

if (!exists) {
    iziToast.show({
        id: 'save-error',
        title: 'Ошибка',
        message: 'Невозможно сохранить данные',
        position: 'topRight'
    });
}

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

Автоматическое удаление предыдущих уведомлений

Для предотвращения дублирования можно использовать метод destroy() или опцию timeout и resetOnHover для автоматического управления временем жизни уведомлений:

iziToast.show({
    id: 'notification',
    title: 'Информация',
    message: 'Обновление данных прошло успешно',
    timeout: 5000,
    resetOnHover: true
});
  • timeout — задаёт время жизни уведомления в миллисекундах.
  • resetOnHover — продлевает время отображения при наведении курсора, предотвращая преждевременное исчезновение.

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

iziToast.destroy('notification');
iziToast.show({
    id: 'notification',
    title: 'Информация',
    message: 'Обновление данных прошло успешно',
});

Создание функций для предотвращения дубликатов

Для часто повторяющихся уведомлений удобно создавать обёртки:

function showUniqueToast(id, title, message, type = 'info') {
    if (!iziToast.getAll().some(n => n.id === id)) {
        iziToast[type]({
            id: id,
            title: title,
            message: message,
            position: 'topRight'
        });
    }
}

// Пример использования
showUniqueToast('network-error', 'Ошибка сети', 'Сервер недоступен');

Такой подход централизует логику дублирования и упрощает поддержку кода.

Контроль дубликатов по содержимому

Иногда достаточно проверять уникальность по тексту уведомления, а не по id. Для этого можно использовать хеширование текста:

function hashMessage(title, message) {
    return `${title}_${message}`;
}

const messageId = hashMessage('Ошибка', 'Невозможно сохранить данные');

if (!iziToast.getAll().some(n => n.id === messageId)) {
    iziToast.show({
        id: messageId,
        title: 'Ошибка',
        message: 'Невозможно сохранить данные'
    });
}

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

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

  1. Всегда использовать id для уведомлений, которые могут повторяться.
  2. Для уведомлений временного характера применять timeout и resetOnHover.
  3. Для сложных систем предусматривать проверку через getAll() и программные фильтры.
  4. В больших приложениях лучше создавать обёртки, чтобы унифицировать логику предотвращения дубликатов.
  5. Для сообщений с динамическим содержимым можно использовать хеширование текста, чтобы уникальность формировалась автоматически.

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

Оглавление