Автозакрытие по таймеру

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

Основы автозакрытия

Основной механизм автозакрытия реализуется через параметр timer. Он указывается в миллисекундах и задаёт время, через которое модальное окно автоматически закроется. Параметр timer можно добавить в объект конфигурации при вызове функции Swal.fire().

Пример:

Swal.fire({
  title: 'Успех!',
  text: 'Ваш запрос был успешно выполнен.',
  icon: 'success',
  timer: 3000  // Окно закроется через 3 секунды
});

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

Таймер и дополнительные опции

Помимо самого таймера, можно настроить несколько других параметров, которые взаимодействуют с этим механизмом.

  • timerProgressBar – отображает индикатор прогресса в модальном окне, который заполняется за время, указанное в параметре timer. Это позволяет пользователю видеть, сколько времени осталось до автоматического закрытия окна.

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

Swal.fire({
  title: 'Информация',
  text: 'Ожидайте завершения загрузки...',
  icon: 'info',
  timer: 5000,
  timerProgressBar: true
});

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

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

Пример:

Swal.fire({
  title: 'Завершение',
  text: 'Процесс завершен, окно закроется через 3 секунды.',
  icon: 'success',
  timer: 3000,
  didClose: () => {
    console.log('Окно было закрыто!');
  }
});

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

Иногда бывает необходимо остановить таймер, если, например, пользователь нажал на кнопку или выполнил какое-то действие. В библиотеке SweetAlert можно использовать метод Swal.close(), чтобы принудительно закрыть окно, прервав таймер.

Пример:

const timer = Swal.fire({
  title: 'Внимание!',
  text: 'Это сообщение закроется через 3 секунды.',
  icon: 'warning',
  timer: 3000
});

// Остановить таймер по событию клика
setTimeout(() => {
  Swal.close();
}, 1000);  // Закрытие окна через 1 секунду после его открытия

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

Интерактивное закрытие

Для пользователей, которым нужно больше времени для взаимодействия с модальным окном, можно добавить возможность вручную отменить автозакрытие, например, через кнопку “Отменить” или аналогичную.

Swal.fire({
  title: 'Вы уверены?',
  text: 'Окно закроется автоматически через 5 секунд.',
  icon: 'question',
  showCancelButton: true,
  cancelButtonText: 'Закрыть вручную',
  timer: 5000,
  timerProgressBar: true
});

В этом случае окно будет закрыто автоматически через 5 секунд, но пользователь также может отменить таймер и закрыть его вручную с помощью кнопки “Закрыть вручную”.

Параллельное использование с другими параметрами

Автозакрытие можно комбинировать с другими настройками SweetAlert, такими как showConfirmButton, showCancelButton и allowOutsideClick. Это позволяет создавать гибкие и информативные всплывающие окна, которые автоматизируют многие процессы, но при этом предоставляют пользователю возможность взаимодействовать с системой.

Swal.fire({
  title: 'Подтверждение действия',
  text: 'Это окно закроется через 5 секунд или вы можете подтвердить действие вручную.',
  icon: 'question',
  showCancelButton: true,
  confirmButtonText: 'Да',
  cancelButtonText: 'Нет',
  timer: 5000,
  timerProgressBar: true,
  allowOutsideClick: false
});

В данном примере окно автоматически закроется через 5 секунд, если пользователь не выбрал одно из предложенных действий, но кнопки “Да” и “Нет” остаются доступными.

Использование таймера в разных ситуациях

Таймер в SweetAlert может быть полезен в разных сценариях:

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

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

Заключение

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

Оглавление