甜蜜的警觉。在警告框中显示倒计时

Question

我在sweetalert消息中显示倒计时时遇到问题。点击后我使用＆＃34; A消息和自动关闭计时器＆＃34;。我希望倒计时在消息中，用户可以看到倒计时。

swal({  
    title: "Please w8 !",
    text: "Data loading...",
    timer: 10000,
    showConfirmButton: false 
});

Answer 1

使用SweetAlert是不可能的。它不支持对UI进行计数。但永远不要说永远： - ）

我准备了一个小黑客，它可以帮助你做到这一点。只需将下面的代码添加到您的应用程序中，您就会看到实时计数机制。并且不要忘记添加jQuery。

var
    closeInSeconds = 5,
    displayText = "I will close in #1 seconds.",
    timer;

swal({
    title: "Auto close alert!",   
    text: displayText.replace(/#1/, closeInSeconds),   
    timer: closeInSeconds * 1000,   
    showConfirmButton: false 
});

timer = setInterval(function() {

    closeInSeconds--;

    if (closeInSeconds < 0) {

        clearInterval(timer);
    }

    $('.sweet-alert > p').text(displayText.replace(/#1/, closeInSeconds));

}, 1000);

结果：

Answer 2

这是更好的解决方案

var timer = 10, // timer in seconds
    isTimerStarted = false;

(function customSwal() {
    swal({  
        title: "Please w8 !",
        text: "Data loading..." + timer,
        timer: !isTimerStarted ? timer * 1000 : undefined,
        showConfirmButton: false
    });
    isTimerStarted = true;
    if(timer) {
        timer--;
        setTimeout(customSwal, 1000);
    }
})();