User-462241089 posted
I am trying to add a idle timer to my web app that will trigger a message to the user asking if they want to remain logged in after one hour of inactivity. A 15 minute timer then runs on the message, and when it hits 0, the user is logged out.
All this code works, but the problem is that the clock displayed in the "logout-counter-span" in the message element is flickering with several numbers. I ran a debug on it and found that it is counting down from all the previous minutes. In the first minute,
it is just 14, but then in the next minute, it should always be 13, but on the first interval, it is 14. it then switches back to 13 until the second it up. This is showing the user 14 for a split second and then shows 13 until the second is done.
Once the timer reaches 12, the first to intervals of each second is 14, then 13, and then goes to 12 for the remainder of the second.
What could be causing this? I have debugged this code but can't figure out why it is doing it. I know it is erroring on the var countDownDate = new Date().getTime() + 15 * 60 * 1000; line, but I don't know why. Below is my code.
var temp;
var idleTime = 0;
var idleInterval;
var time: number;
$(document).ready(function () {
$(this).mousemove(function (e) {
idleTime = 0;
});
$(this).keypress(function (e) {
idleTime = 0;
});
idleInterval = setInterval(timerIncrement, 60000); // 1 minute
if (document.querySelector("#IdleTimeout") != null) {
time = (+document.querySelector("#IdleTimeout").getAttribute("value") - 1);
}
});
function timerIncrement() {
idleTime = idleTime + 1;
if (time != null) {
if (idleTime > time) {
SetUpTimer();
}
}
}
function pad(num, size) {
num = num.toString();
while (num.length < size) num = "0" + num;
return num;
}
function SetUpTimer() {
if (document.getElementById('TimeOutModal') != null) {
var countDownDate = new Date().getTime() + 15 * 60 * 1000;
$('#TimeOutModal').modal('show');
temp = setInterval(function () {
var now = new Date().getTime(),
timel = countDownDate - now;
var minutes = Math.floor((timel % (1000 * 60 * 60)) / (1000 * 60)),
seconds = Math.floor((timel % (1000 * 60)) / 1000);
document.getElementById("logout-counter-span").innerHTML = pad(minutes, 2) + ":" + pad(seconds, 2);
if (timel <= 0) {
document.getElementById("timeOutText").innerHTML = "Logging out.";
$.ajax({
async: true,
type: 'GET',
url: `/Logout`,
data: null,
cache: false,
success: (res: any): any => {
clearTimeout(temp);
clearTimeout(idleInterval);
location.href = '/login/';
}
});
}
}, 300);
} else {
clearTimeout(temp);
clearTimeout(idleInterval);
}
}
$('#TimeOutSignOut').on('click', function () {
$.ajax({
async: true,
type: 'GET',
url: `/Logout`,
data: null,
cache: false,
success: (res: any): any => {
clearTimeout(temp);
clearTimeout(idleInterval);
location.href = '/login/'
}
});
});
$('#TimeOutSignIn').on('click', function () {
$.ajax({
async: true,
type: 'POST',
url: `/Reset`,
data: null,
cache: false,
success: function (res: any) {
try {
clearTimeout(temp);
clearTimeout(idleInterval);
idleInterval = setInterval(timerIncrement, 60000); // 1 minute
} catch (e) {
//console.log(e);
}
}
});
});
var time = 60;
<input data-val="@time" id="IdleTimeout" type="hidden" value="@time">
<div class="modal fade" id="TimeOutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
<p id="timeOutText">
Your session is about to expire. You will be automatically signed out in <span id="logout-counter-span" class="bold"></span>
</p>
</div>
<div class="modal-footer">
<a id="TimeOutSignOut" type="button" class="btn btn-secondary mr-2">Sign-out</a>
<a id="TimeOutSignIn" type="button" class="btn btn-primary" data-dismiss="modal">Keep me logged in</a>
</div>
</div>
</div>
</div>
