javascript - 使用 Sweet Alert 插件的 setInterval 函数中的倒计时

Question

我正在尝试实现 sweetAlert 倒计时。 20 分钟不活动后，会弹出甜蜜警报，显示 session 即将超时，用户有两个选择:注销或继续，这会重新启动空闲计时器。当移动鼠标或单击时，空闲计时器也会重置。我的问题是我想在 sweetAlert 中显示倒计时标题的跨度 ( title: "Teie sessioon on aegumas <span id='secondsLeft'></span> sekundi pärast!", ) 从 60-0(秒)开始，然后自动注销。 我尝试了所有的方法，但没有任何效果。倒计时出现了，但没有重新开始。

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

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