Управление таймером

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

Опция timer

Опция timer в SweetAlert задаёт время (в миллисекундах), через которое всплывающее окно автоматически закроется. Это особенно полезно для уведомлений, которые должны исчезать сами по себе после того, как пользователь успел их заметить.

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

Swal.fire({
  title: 'Сообщение',
  text: 'Это сообщение исчезнет через 3 секунды.',
  timer: 3000
});

В этом примере окно с сообщением будет автоматически закрыто через 3 секунды.

Прерывание таймера

Иногда может потребоваться прервать автоматическое закрытие окна. Это можно сделать с помощью метода Swal.close() в любое время, если пользователь взаимодействует с окном, например, нажимает кнопку. Также, таймер можно остановить, если пользователь активно работает с окном, например, при наведении на него курсора мыши.

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

Пример:

Swal.fire({
  title: 'Ваши действия имеют значение',
  text: 'Если вы находитесь рядом с окном, оно не закроется.',
  timer: 5000,
  willClose: () => clearTimeout(timer),
}).then(() => {
  // Дополнительные действия после закрытия окна
});

let timer = setTimeout(() => Swal.close(), 5000);

document.querySelector('.swal2-container').addEventListener('mouseover', () => {
  clearTimeout(timer);
});

document.querySelector('.swal2-container').addEventListener('mouseout', () => {
  timer = setTimeout(() => Swal.close(), 5000);
});

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

Таймер с обратным отсчётом

Если требуется отображение оставшегося времени до закрытия окна, SweetAlert позволяет добавить в окно отображение обратного отсчёта времени. Для этого можно использовать параметры timerProgressBar и didOpen.

Пример:

Swal.fire({
  title: 'Это окно закроется через 5 секунд',
  timer: 5000,
  timerProgressBar: true,
  didOpen: () => {
    Swal.showLoading();
  },
  willClose: () => {
    Swal.stopLoading();
  }
});

Здесь параметр timerProgressBar включает отображение прогресс-бара, который будет заполняться по мере истечения времени. Метод didOpen запускает анимацию загрузки, а willClose останавливает её перед закрытием окна.

Отображение таймера в тексте

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

Пример динамического текста с таймером:

const timerInterval = setInterval(() => {
  Swal.getContent().querySelector('strong').textContent = `Осталось: ${Math.max(0, Math.ceil((3000 - (Date.now() - startTime)) / 1000))} секунд`;
}, 1000);

const startTime = Date.now();

Swal.fire({
  title: 'Таймер',
  html: 'Осталось: <strong>3</strong> секунд',
  timer: 3000,
  timerProgressBar: true,
  didOpen: () => {
    Swal.showLoading();
  },
  willClose: () => {
    clearInterval(timerInterval);
    Swal.stopLoading();
  }
});

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

Взаимодействие с пользовательским интерфейсом

Если необходимо создать окно, которое будет автоматически закрываться, но при этом оставлять возможность для пользователя отменить это действие, можно использовать кнопку отмены или другие элементы управления. Например, добавление кнопки “Отмена”, которая будет сбрасывать таймер:

let timer;
Swal.fire({
  title: 'Таймер с отменой',
  text: 'Вы можете отменить автоматическое закрытие.',
  timer: 5000,
  showCancelButton: true,
  cancelButtonText: 'Отмена',
  didOpen: () => {
    timer = setTimeout(() => Swal.close(), 5000);
  },
  willClose: () => {
    clearTimeout(timer);
  }
}).then((result) => {
  if (result.dismiss === Swal.DismissReason.cancel) {
    clearTimeout(timer);
  }
});

В этом примере окно закроется через 5 секунд, если пользователь не отменит действие, нажав на кнопку «Отмена». При этом при нажатии на кнопку отмены таймер будет остановлен.

Совмещение таймера с другими функциями

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

Пример с подтверждением:

Swal.fire({
  title: 'Подтвердите действие',
  text: 'Если вы не нажмёте кнопку в течение 10 секунд, окно закроется.',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Да',
  cancelButtonText: 'Нет',
  timer: 10000,
  timerProgressBar: true,
  didOpen: () => {
    Swal.showLoading();
  },
  willClose: () => {
    Swal.stopLoading();
  }
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire('Подтверждено', 'Вы выбрали «Да»!', 'success');
  } else if (result.dismiss === Swal.DismissReason.cancel) {
    Swal.fire('Отменено', 'Вы выбрали «Нет»!', 'error');
  }
});

Этот код создаёт окно с возможностью подтверждения или отмены, которое закроется через 10 секунд, если пользователь не успеет выбрать один из вариантов.

Заключение

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

Оглавление