Цепочки событий

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

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

Toastify({
  text: "Сообщение с цепочкой событий",
  duration: 3000,
  close: true,
  onClick: () => {
    console.log("Уведомление было кликнуто");
    // Дополнительное событие
    Toastify({
      text: "Второе уведомление после клика",
      duration: 2000
    }).showToast();
  },
  callback: () => console.log("Уведомление закрылось")
}).showToast();

В этом примере onClick запускает новую последовательность уведомлений, создавая эффект цепочки.

Управление порядком событий

Toastify позволяет управлять порядком вызова обработчиков через следующие ключи:

  • onClick – срабатывает при клике на уведомление.
  • callback – вызывается при закрытии уведомления.
  • duration – определяет задержку перед автоматическим закрытием уведомления.
  • close – позволяет добавить кнопку закрытия, клик по которой также активирует callback.

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

function showNextToast(message) {
  Toastify({
    text: message,
    duration: 2500,
    callback: () => {
      if (message === "Первое уведомление") {
        showNextToast("Второе уведомление");
      }
    }
  }).showToast();
}

showNextToast("Первое уведомление");

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

Передача данных между событиями

Для более сложных цепочек часто требуется передавать данные от одного события к другому. Toastify позволяет использовать замыкания и внешние переменные для хранения состояния:

let count = 0;

function showCountingToast() {
  Toastify({
    text: `Уведомление номер ${count + 1}`,
    duration: 2000,
    onClick: () => {
      count++;
      if (count < 3) {
        showCountingToast();
      }
    }
  }).showToast();
}

showCountingToast();

Таким образом, каждое уведомление получает доступ к текущему состоянию и может принимать решение о продолжении цепочки.

Асинхронные цепочки

Для интеграции с API или другими асинхронными действиями цепочки событий могут быть связаны с Promise:

function fetchAndToast() {
  fetch("https://jsonplaceholder.typicode.com/todos/1")
    .then(response => response.json())
    .then(data => {
      Toastify({
        text: `Загрузка завершена: ${data.title}`,
        duration: 3000
      }).showToast();
    })
    .catch(error => {
      Toastify({
        text: `Ошибка загрузки: ${error.message}`,
        duration: 3000,
        backgroundColor: "red"
      }).showToast();
    });
}

fetchAndToast();

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

Динамическая модификация цепочек

Цепочки событий можно строить динамически, основываясь на действиях пользователя:

let step = 0;

function dynamicToast() {
  const messages = [
    "Шаг 1: начало",
    "Шаг 2: продолжаем",
    "Шаг 3: завершение"
  ];

  Toastify({
    text: messages[step],
    duration: 2000,
    onClick: () => {
      step++;
      if (step < messages.length) dynamicToast();
    }
  }).showToast();
}

dynamicToast();

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

Практические советы по цепочкам событий

  1. Минимизировать глубину вложенности – слишком длинные рекурсивные цепочки затрудняют отладку.
  2. Использовать внешние функции и переменные состояния – упрощает управление порядком событий.
  3. Интегрировать асинхронные действия через Promises или async/await – позволяет строить цепочки, зависимые от данных.
  4. Следить за временем жизни уведомлений (duration) – слишком короткие уведомления могут не успеть инициировать следующий шаг цепочки.

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

Оглавление