Sweetalert延迟弹出窗口答案

【问题标题】：Sweetalert delay popup from openingSweetalert延迟弹出窗口
【发布时间】：2018-08-10 21:43:24
【问题描述】：

我正在尝试延迟 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/";
        }
    }) 
}

任何帮助表示赞赏！

【问题讨论】：

setTimeout 会为此工作吗？

标签： javascript alert sweetalert sweetalert2

【解决方案1】：

具体的 SWEETALERT 2 答案：

Leo 的上述代码逻辑答案是正确的。我与 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);

【讨论】：

【解决方案2】：

是的，您确实可以使用 setTimeout 轻松实现这一点，我设置了一个简单的 sn-p，您可以尝试一下！

// 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>

-狮子座

【讨论】：

谢谢利奥！帮助我找到了答案 - 已将您的答案标记为正确并在下面添加了具体解决方案。