Паузы и возобновление таймера

Toastify — это лёгкая и гибкая библиотека для создания уведомлений (toasts) в браузере. Одним из ключевых аспектов работы с уведомлениями является контроль времени их отображения. Таймер, отвечающий за автоматическое закрытие уведомления, может быть приостановлен или возобновлён в зависимости от действий пользователя или логики приложения.

Механизм таймера в Toastify

Каждое уведомление в Toastify создаётся с указанием длительности показа через свойство duration. По умолчанию таймер начинает отсчёт сразу после отображения уведомления:

Toastify({
    text: "Пример уведомления",
    duration: 5000 // время в миллисекундах
}).showToast();
  • duration — число миллисекунд, через которое toast исчезнет автоматически.
  • Если duration указано как -1, уведомление будет оставаться на экране до явного закрытия.

Таймер работает асинхронно, используя setTimeout для планирования скрытия. Управление этим таймером позволяет приостанавливать или возобновлять его отсчёт.

Приостановка таймера

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

  1. Сохраняется время начала отображения уведомления.
  2. При срабатывании события паузы вычисляется, сколько времени осталось до закрытия.
  3. Таймер отменяется через clearTimeout.

Пример:

let toast = Toastify({
    text: "Таймер можно поставить на паузу",
    duration: 5000,
    onClick: () => console.log("Клик по уведомлению")
}).showToast();

let startTime = Date.now();
let remainingTime = 5000;
let timeoutId = setTimeout(() => toast.hideToast(), remainingTime);

// Функция паузы
function pauseToast() {
    clearTimeout(timeoutId);
    remainingTime -= Date.now() - startTime;
}

В этом примере pauseToast() останавливает таймер и сохраняет оставшееся время до автоматического закрытия уведомления.

Возобновление таймера

После паузы таймер можно возобновить, используя оставшееся время. Для этого создаётся новый setTimeout с остатком времени:

function resumeToast() {
    startTime = Date.now();
    timeoutId = setTimeout(() => toast.hideToast(), remainingTime);
}

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

Интеграция с событиями пользователя

Часто пауза и возобновление таймера привязываются к событиям mouseenter и mouseleave, чтобы уведомление оставалось на экране, пока пользователь взаимодействует с ним:

let toastElement = toast.toastElement; // HTMLElement toast

toastElement.addEventListener("mouseenter", pauseToast);
toastElement.addEventListener("mouseleave", resumeToast);
  • mouseenter — при наведении курсора пауза таймера предотвращает скрытие уведомления.
  • mouseleave — после ухода курсора таймер возобновляется с остатком времени.

Этот подход улучшает UX, особенно для уведомлений с важной информацией.

Обработка множественных уведомлений

Если на странице одновременно отображается несколько toast-сообщений, каждое уведомление имеет собственный таймер, который необходимо контролировать индивидуально. Для этого лучше хранить объекты toast вместе с их состоянием таймера:

let toasts = [];

function createToast(message, duration) {
    let toastObj = {
        toast: Toastify({ text: message, duration: duration }).showToast(),
        startTime: Date.now(),
        remainingTime: duration,
        timeoutId: null
    };
    toastObj.timeoutId = setTimeout(() => toastObj.toast.hideToast(), duration);
    toasts.push(toastObj);
}

Каждое уведомление может иметь свои функции pause и resume, обеспечивая независимое управление временем отображения.

Советы по точности таймера

  1. Использовать системное время: для расчёта оставшегося времени рекомендуется опираться на Date.now(), а не только на счётчик setTimeout.
  2. Очистка таймера: всегда вызывать clearTimeout, чтобы избежать утечек памяти при быстром появлении и скрытии уведомлений.
  3. Обновление состояния: при возобновлении таймера обновлять startTime, чтобы корректно отслеживать оставшееся время при последующих паузах.

Настраиваемые варианты

Можно реализовать автоматическую паузу при других событиях, например, при фокусе окна или модальных диалогах. Toastify предоставляет события onShow, onClick и onClose, которые позволяют интегрировать управление таймером с логикой приложения:

Toastify({
    text: "Автопауза при скрытии окна",
    duration: 7000,
    onClick: () => console.log("Уведомление кликнуто"),
    onClose: () => console.log("Уведомление закрыто")
}).showToast();

События позволяют динамически запускать pauseToast и resumeToast в зависимости от состояния интерфейса.

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

Оглавление