Отладка callback-функций

Для работы с Toastify необходимо подключить библиотеку через CDN или установить через npm:

или через npm:

npm install toastify-js

После подключения можно вызывать Toastify() для создания уведомлений. Базовая форма:

Toastify({
  text: "Привет, мир!",
  duration: 3000
}).showToast();

Ключевой момент: метод showToast() инициирует отображение уведомления. До его вызова уведомление существует только в объекте, но не на странице.

Callback-функции в Toastify

Toastify поддерживает несколько точек для использования callback-функций:

  • onClick — вызывается при клике на уведомление.
  • callback — вызывается при завершении показа уведомления.
  • onClose — срабатывает при закрытии уведомления вручную.

Пример:

Toastify({
  text: "Нажми на меня",
  duration: 5000,
  close: true,
  onClick: function() {
    console.log("Уведомление было нажато");
  },
  callback: function() {
    console.log("Время показа уведомления истекло");
  },
  onClose: function() {
    console.log("Уведомление закрыто пользователем");
  }
}).showToast();

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

Отладка callback-функций

Логирование внутри callback

Для понимания последовательности вызовов callback удобно использовать console.log:

Toastify({
  text: "Отладка callback",
  duration: 2000,
  onClick: () => console.log("click"),
  callback: () => console.log("callback"),
  onClose: () => console.log("close")
}).showToast();

Результат позволит увидеть порядок выполнения: сначала onClick при клике, затем onClose и callback после окончания показа.

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

В сложных сценариях полезно вставлять debugger:

Toastify({
  text: "Debugging example",
  duration: 3000,
  onClick: function() {
    debugger;
    console.log("click detected");
  }
}).showToast();

При открытой консоли браузера выполнение остановится на строке с debugger, позволяя проверить состояние всех переменных и контекст выполнения.

Контекст выполнения

Callback-функции Toastify вызываются с контекстом самого уведомления. Это значит, что внутри функции this ссылается на объект уведомления:

const toast = Toastify({
  text: "Проверка this",
  duration: 3000,
  onClick: function() {
    console.log(this); // объект уведомления
  }
});
toast.showToast();

Это позволяет динамически изменять свойства уведомления прямо из callback.

Асинхронные операции внутри callback

Callback-функции поддерживают асинхронный код:

Toastify({
  text: "Асинхронная операция",
  duration: 4000,
  callback: async function() {
    await fetch("/log-toast")
      .then(res => res.json())
      .then(data => console.log("Сервер ответил:", data));
  }
}).showToast();

Важный нюанс: callback не ждёт завершения промиса, уведомление уже будет скрыто. Асинхронные операции должны быть спроектированы без зависимости от видимости уведомления.

Обработка ошибок в callback

Для предотвращения сбоев лучше оборачивать код callback в try/catch:

Toastify({
  text: "Обработка ошибок",
  duration: 3000,
  onClick: function() {
    try {
      throw new Error("Тестовая ошибка");
    } catch (e) {
      console.error("Ошибка в onClick:", e.message);
    }
  }
}).showToast();

Это предотвращает прерывание других callback и внутренней логики Toastify.

Последовательное выполнение нескольких callback

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

function firstAction() {
  console.log("Первая функция");
}

function secondAction() {
  console.log("Вторая функция");
}

Toastify({
  text: "Множественные callback",
  duration: 3000,
  callback: function() {
    firstAction();
    secondAction();
  }
}).showToast();

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

Примеры реальных сценариев отладки

  1. Тестирование кликов по уведомлению:
Toastify({
  text: "Нажми для теста",
  duration: 5000,
  onClick: () => alert("Клик зарегистрирован")
}).showToast();
  1. Логирование скрытия уведомления:
Toastify({
  text: "Закрытие уведомления",
  duration: 3000,
  onClose: () => console.log("Уведомление скрыто")
}).showToast();
  1. Асинхронный callback с fetch:
Toastify({
  text: "Отправка данных",
  duration: 4000,
  callback: async () => {
    const res = await fetch("/api/log-toast");
    console.log(await res.text());
  }
}).showToast();

Эти шаблоны позволяют последовательно выявлять ошибки и корректно отлаживать все callback-функции.

Оглавление