raqulka raqulka - 3 years ago 197
Javascript Question

Countdown in setInterval function with sweet Alert plugin

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

Answer Source

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;
  }
});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download