CODEWITHSUNDEEP
javascriptjquery
jkjhse
jkjhse

Reputation: 23

Logout with a countdown progress bar

I am using the code from here to logout users after idle time (when no click is received anywhere on the body). I am trying to combine that with a countdown progress bar here

My Code below

#timeouts {
    display: none;
}
#progressBar {
    width: 100%;
    margin: 10px auto;
    height: 22px;
    background-color: red;
}

    #progressBar div {
        height: 100%;
        text-align: right;
        padding: 0 10px;
        line-height: 22px; /* same as #progressBar height if we want text middle aligned */
        width: 0;
        background-color: yellow;
        box-sizing: border-box;
    }

HTML

<body class="smoothscroll boxed pattern7 printable" onload="StartTimers();" onclick="ResetTimers();">
    <div id="progressBar"><div></div></div>
    <div id="timeouts">
        <h2>Session About To Timeout</h2>
            <span class="alert alert-warning">Alert! Logout in 4 Seconds</span>
     </div>
</body>

JS

var timoutWarning = 10000; // Displa
var timoutNow = 14000; // Time
var logoutUrl = '/logout'; //
var warningTimer;
var timeoutTimer;

// Start timers.
function StartTimers() {
    warningTimer = setTimeout("IdleWarning()", timoutWarning);
    timeoutTimer = setTimeout("IdleTimeout()", timoutNow);
}

// Reset timers.
function ResetTimers() {
    clearTimeout(warningTimer);
    clearTimeout(timeoutTimer);
    StartTimers();
    document.getElementById("timeouts").style.display = "none";
    progress(14, 14, $('#progressBar')); //This makes things go crazy
}

// Show idl
function IdleWarning() {
    document.getElementById("timeouts").style.display = "block";
}

// Logout the user.
function IdleTimeout() {
    window.location = logoutUrl;
}
function progress(timeleft, timetotal, $element) {
    var progressBarWidth = timeleft * $element.width() / timetotal;
    $element.find('div').animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, 'linear').html(timeleft+ " s");
    if (timeleft > 0) {
        setTimeout(function () {
            progress(timeleft - 1, timetotal, $element);
        }, 1000);
    }
};

progress(14, 14, $('#progressBar'));

It will work perfectly on page load. But when the function ResetTimers() is called, it is supposed to reset the progress function. But things go crazy with the progress bar showing random values. Please help me figure out what is going on.

Upvotes: 1

Views: 1182

Answers (1)

jkjhse
jkjhse

Reputation: 23

I solved it like this.

var timoutWarning = 1140000; // Display warning after 19 minutes
var logoutUrl = '/logout'; //
var warningTimer;
var timeoutTimer;
var progressTimer;
var timeleft = 1200;
var timetotal = 1200;
// Start timers.
function StartTimers() {
    warningTimer = setTimeout("IdleWarning()", timoutWarning);
    progress(timeleft, timetotal, $('#progressBar'));
}
// Reset timers.
function ResetTimers() {
    clearTimeout(warningTimer);
    clearTimeout(progressTimer);
    StartTimers();
    document.getElementById("timeouts").style.display = "none";
}
// Show idl
function IdleWarning() {
    document.getElementById("timeouts").style.display = "block";
}
// Logout the user.
function IdleTimeout() {
    window.location = logoutUrl;
}
function progress(timeleft, timetotal, $element) {
    var progressBarWidth = timeleft * 100 / timetotal;
    $element.find('div').animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, 'linear').html((timeleft / 60).toFixed(1) + " m");
    if (timeleft > 0) {
        progressTimer = setTimeout(function () { progress(timeleft - 1, timetotal, $element); }, 1000);
    }
    else {

        IdleTimeout();
    }
};

By assigning a variable to the setTimeout function call inside my recursive function and then clear it by clearTimeout(progressTimer) inside the ResetTimers() call. Thank you

Upvotes: 1

Related Questions