Question

我使用here中的代码在空闲时间之后注销用户（当身体上的任何地方都没有收到任何点击时）。我正在尝试将其与倒计时进度条here

结合起来

我的代码

#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'));

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

Answer 1

我这样解决了。

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

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

使用倒计时进度条退出

1 个答案: