Javascript 使用倒计时进度条注销

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

下面是我的代码

#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

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

我是这样解决的

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）清除它。谢谢你

你能试着创建一个

演示程序

来演示你所说的进度条让事情变得疯狂吗？我试过了。但我的演示JSFIDLE不起作用。我已经对这一点进行了微调。函数进度（timeleft，timetotal，$element）仍然使用原始值运行，即使我尝试从Resettimers（）内部再次运行它。因此timeleft有两个值，一个来自重置计时器调用，另一个来自原始倒计时。因此，在ResetTimer（）中再次调用之前，我需要从原始倒计时中中断循环。我发现下面的函数仍然在使用原始值0运行，即使我尝试从ResetTimers（）函数progress（timeleft，timetotal，$element）{----------}；因此，我得到了进度条的两个值，因为这个函数有两个实例正在运行。如何在从ResetTimer（）再次启动第一个函数之前中断它这工作正常。我可以在多个打开的选项卡之间同步此超时吗？还是我需要问另一个问题？

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

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