使用 sweet Alert 插件在 setInterval 函数中倒计时

Question

我正在尝试在自动注销之前从 60-0（秒）开始倒计时到 sweetAlert. After 20 minutes of inactivity sweet alert pops up and displays that the session is about to time out and user has two options: to log out or continue, which restarts the idle timer. The idle timer is reset also when the mouse is moved or a click is made. My problem is that I would like to display a countdown in the sweetAlert 标题的跨度（title: "Teie sessioon on aegumas <span id='secondsLeft'></span> sekundi pärast!",）。我尝试了所有方法，但没有任何效果。倒计时出现，但没有重新开始。

如有任何帮助，我们将不胜感激。

      $(document).ready(function () {
            var idleTime = 0;
            //Zero the idle timer on mouse movement

            function timerIncrement() {
                idleTime ++;
                if (idleTime >= 5) { // For testing 5 seconds else 20 minutes
                        swal({   
                        html: true,
                        title: "Teie sessioon on aegumas <span id='secondsLeft'></span> sekundi pärast!",  
                        text: "Sessiooni pikendamiseks vajutage nuppu Jätka, välja logimiseks vajutage Välju." ,   
                        type: "warning",   
                        showCancelButton: true,   
                        confirmButtonColor: "#DD6B55",   
                        confirmButtonText: "Jätka",   
                        cancelButtonText: "Välju",  
                        timer: 60000, //3600
                        closeOnConfirm: false,   
                        closeOnCancel: false }, function(isConfirm){
                        if (isConfirm) {    
                            swal("Jätkatud!", 
                                 "Teie sessiooni pikendati 1 tunni võrra.", 
                                 "success");  

                        } else {     
                            swal("Väljutud", 
                                 "Teid suunatakse tagasi sisselogimis lehele", 
                                 "error"),
                                location.href = "logout.php?logout=true";
                        } 
                    });
                }
            }
            //Increment the idle time counter every minute.
            var idleInterval = setInterval(timerIncrement, 1000); // 1 minute

            $(this).mousemove(function (e) {
                idleTime = 0;
            });
            $(this).keypress(function (e) {
                idleTime = 0;
            }

Answer 1

试试这个，您的代码现在正在发生的事情是每秒重新创建 sweetAlert 插件。如果那是你打算发生的事情，你可以使用它。

此代码段使用 countDown 变量与 sweetAlert 插件的 title 属性一起显示。每次调用 timerIncrement() 时，都会重新创建 sweetAlert 插件并减少 countDown。

$(document).ready(function() {
  var idleTime = 0;
  var countDown = 20; //assuming countdown is 20 seconds

  function timerIncrement() {
    idleTime++;
    if (idleTime >= 5) { // For testing 5 seconds else 20 minutes
      swal({
        html: true,
        title: "Teie sessioon on aegumas " + countDown + " pärast!",
        ... // other configs
      });
      countDown--;
    }
  }
  //Increment the idle time counter every minute.
  var idleInterval = setInterval(timerIncrement, 1000); // 1 minute

  $(this).mousemove(function(e) {
    idleTime = 0;
    resetCountdown(); //reset
  });
  $(this).keypress(function(e) {
    idleTime = 0;
    resetCountdown(); //reset
  });

  function resetCountdown() {
    countDown = 20;
  }
});

Answer 2

<script>
$(document).ready(function() {
    var closeInSeconds = 5,
        displayText = "I will close in #1 seconds.",
        timer;

    swal({
        title: "Auto close alert!",
        html: "<p class='Alert'>Hello</p>",
        timer: closeInSeconds * 1000,
        showConfirmButton: false
    });

    timer = setInterval(function() {

        closeInSeconds--;

        if (closeInSeconds < 0) {

            clearInterval(timer);
        }

        $('.Alert').html(displayText.replace(/#1/, closeInSeconds));

    }, 1000);
});
</script>

使用 sweet Alert 插件在 setInterval 函数中倒计时

Countdown in setInterval function with sweet Alert plugin

javascript

jquery

sweetalert