使用倒计时进度条退出

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>

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.

它将在页面加载时完美地工作。但是当调用函数ResetTimers（）时，它应该重置进度函数。但随着进度条显示随机值，事情变得疯狂。请帮我弄清楚发生了什么。

1 个解决方案

#1

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

通过在我的递归函数中为setTimeout函数调用赋值变量，然后在ResetTimers（）调用中通过clearTimeout（progressTimer）清除它。谢谢

1 个解决方案

#1

更多相关文章

随机推荐