註銷了倒計時進度條

我使用的代碼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>

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（）被調用時，它應該重置進度函數。但事情變得瘋狂，進度條顯示隨機值。請幫我弄清楚發生了什麼事。

來源

2015-12-10 jkjhse

可否請你嘗試創建你的意思由_things發瘋與進步bars_了'DEMO'？ –

我試過。但我的演示jsfiddle不起作用。我很好地調整了這一點。函數進度（timeleft，timetotal，$ element）仍然以原始值運行，即使我嘗試從Resettimers（）內部重新運行它。所以timeleft有兩個值，一個來自重置定時器調用，另一個來自原來的倒數。所以，我需要打破從一部開拓創新的循環中ResetTimer（） – jkjhse

再次調用前倒計時我想通了，下面的功能仍然使用原來的值設置爲0運行，即使我嘗試從ResetTimers（）再次運行功能進展（的timeleft，timetotal，$元件）{ ----- }; 因此我進度條獲得兩個值，因爲有這個功能運行兩個實例。如何在從ResetTimer（）重新啓動之前打破第一個功能 – jkjhse

我解決了它這樣的。

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

通過ResetTimers在我的遞歸函數內部分配給setTimeout函數調用一個變量，然後通過clearTimeout（progressTimer）明確它（）調用。謝謝

來源

2015-12-10 15:14:03 jkjhse

這工作正常。任何方式，我可以在多個打開的標籤之間同步此超時？或者我需要爲此提出另一個問題？ – jkjhse

註銷了倒計時進度條

回答

相關問題