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

Question

我在sweetalert消息中显示倒计时时遇到问题.点击后我使用"带自动关闭计时器的消息".我希望倒计时在消息中,用户可以看到倒计时.

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);
    }
})();