Countdown in setInterval function with sweet Alert

问题:

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.

Any help would be appreciated.

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

回答1:

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.

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

回答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>