带有甜蜜警报插件的setInterval函数中的倒计时 [英] Countdown in setInterval function with sweet Alert plugin

问题描述

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

I am trying to implement countdown to 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's span (title: "Teie sessioon on aegumas <span id='secondsLeft'></span> sekundi pärast!", )from 60-0 (seconds) before it logs out automatically. I tried all the ways, but nothing worked. The countdown showed up, but didn't restart.

任何帮助将不胜感激.

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

推荐答案

尝试一下，现在您的代码正在发生的事情是每秒重新创建sweetAlert插件.如果您打算这样做，那么可以使用它.

Try this, what's happening to your code right now is that the sweetAlert plugin is being recreated every second. If that's what you intend to happen, you can use this.

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

This snippet makes use of a countDown variable to be displayed with the title attribute of the sweetAlert plugin. Each time timerIncrement() is called, the sweetAlert plugin is recreated and the countDown is decremented.

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

这篇关于带有甜蜜警报插件的setInterval函数中的倒计时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！