onClosed

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

Синтаксис

new Noty({
  text: 'Сообщение об уведомлении',
  type: 'success',
  timeout: 3000,
  callbacks: {
    onClosed: function() {
      console.log('Уведомление закрыто');
    }
  }
}).show();

Пояснения к синтаксису:

  • text — текст уведомления.
  • type — тип уведомления (alert, success, error, warning, information).
  • timeout — время жизни уведомления в миллисекундах.
  • callbacks.onClosed — функция, вызываемая после полного закрытия уведомления.

Моменты вызова onClosed

  1. Автоматическое закрытие по таймеру Если установлен timeout, уведомление автоматически исчезает через указанное время. onClosed срабатывает после завершения анимации закрытия.

  2. Закрытие вручную через API Вызов методов noty.close() или noty.closeAll() также инициирует событие onClosed.

  3. Закрытие через пользовательский интерфейс Нажатие на крестик (closeWith: ['click']) запускает закрытие уведомления и после анимации вызывает onClosed.

Примеры использования

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

const noty = new Noty({
  text: 'Данные сохранены',
  type: 'success',
  timeout: 2500,
  callbacks: {
    onClosed: function() {
      document.getElementById('status').textContent = 'Готово';
    }
  }
}).show();

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

Запуск следующего уведомления

new Noty({
  text: 'Загрузка завершена',
  type: 'information',
  timeout: 2000,
  callbacks: {
    onClosed: function() {
      new Noty({
        text: 'Можно начать следующий шаг',
        type: 'alert',
        timeout: 3000
      }).show();
    }
  }
}).show();

Здесь второе уведомление появляется только после закрытия первого, что позволяет организовать последовательность уведомлений.

Отличие от onClose

Событие onClose срабатывает до начала анимации закрытия, тогда как onClosed вызывается после полного исчезновения уведомления и удаления его из DOM. Это ключевое различие важно для работы с элементами страницы, которые зависят от окончательного исчезновения уведомления.

Поддержка асинхронных действий

Функция onClosed может содержать асинхронный код, включая промисы:

new Noty({
  text: 'Обработка данных...',
  type: 'alert',
  timeout: 1500,
  callbacks: {
    onClosed: async function() {
      await fetch('/log-close', { method: 'POST' });
      console.log('Событие закрытия отправлено на сервер');
    }
  }
}).show();

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

Комбинирование с другими колбэками

onClosed можно использовать совместно с onShow, onClose и другими колбэками:

new Noty({
  text: 'Выполняется процесс',
  type: 'warning',
  timeout: 2000,
  callbacks: {
    onShow: function() { console.log('Уведомление показано'); },
    onClose: function() { console.log('Начало закрытия'); },
    onClosed: function() { console.log('Уведомление полностью закрыто'); }
  }
}).show();

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

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

  • Использовать onClosed, если требуется очистка DOM или завершение анимаций.
  • Для цепочек уведомлений оптимально комбинировать onClosed с созданием нового экземпляра Noty.
  • Асинхронные задачи внутри onClosed должны быть безопасны и не блокировать основной поток.
  • Не путать с onClose, если необходимо дождаться полного исчезновения уведомления.

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

Хочешь, чтобы я сделал этот разбор?

Оглавление