Sweetalert задерживает всплывающее окно от открытия

Question

Я пытаюсь отложить всплывающее окно SweetAlert, чтобы оно не отображалось в течение нескольких секунд после его запуска.

Например, пользователь выполняет действие на веб-странице, чтобы вызвать SweetAlert, но вместо мгновенного отображения он ждет 2 секунды, а затем отображает. - Я искал разные способы сделать это, но не повезло... Я думаю, может быть setTimeout нужно?

Вот моя функция SweetAlert, которая работает до сих пор:

if( response == 10 ){
    swal({
      type: 'success',
      title: 'YOUR BALANCED BOX IS FULL',
      text: 'Youve added the recommended amount of items for your plan!',
      allowOutsideClick: false,
      showCancelButton: true,
      cancelButtonText: "Modify Selection",
      cancelButtonColor: '#d33',
      showConfirmButton: true,
      confirmButtonColor: '#61ce70',
      confirmButtonText: "Proceed To Cart",
    }).then((result) => {
        if (result.value) {
            window.location = "/basket/";
        }
    }) 
}

Любая помощь приветствуется!

Answer 1

Да, действительно, вы можете использовать setTimeout для этого, я настроил простой фрагмент, чтобы вы могли попробовать!

// When button gets clicked.
$("#button").click(() => {
 // Instantely change it's text to loading..
 $("#button").text("Loading!");
  // Wait 2kms then change the text to Done!
 setTimeout(() => {
   $("#button").text("Done!");
  }, 2000);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Event</button>

-Лео

Answer 2

КОНКРЕТНЫЙ СВИТАЛЕРТ 2 ОТВЕТ:

Над кодом логики ответ от Льва правильный. Делюсь финальной версией с SweetAlert 2 с setTimeout как функция, добавленная для задержки открытия всплывающего окна.

setTimeout Функция оборачивается вокруг всей функции SweetAlert 2, а таймер устанавливается в нижней части конца функции (в данном случае 3000).

Надеюсь, это поможет любому, кто хочет сделать то же самое!

    setTimeout(function(){swal({
  type: 'success',
  title: 'YOUR BALANCED BOX IS FULL',
  text: 'Youve added the recommended amount of items for your plan!',
  allowOutsideClick: false,
  showCancelButton: true,
  cancelButtonText: "Modify Selection",
  cancelButtonColor: '#d33',
  showConfirmButton: true,
  confirmButtonColor: '#61ce70',
  confirmButtonText: "Proceed To Cart",
}).then((result) => {
  if (result.value) {
    window.location = "/basket/";
  }
})},3000);