我已经编写了 javascript，如果浏览器在 4 秒内没有任何事件，则会发出警报。如果没有浏览器事件，则会出现一个对话框，要求延长 session 。如果 4 秒内没有任何事件，通知就会消失。如果用户单击继续 session ，则应重置计数器并检查是否不活动。
代码如下。在页面加载时，它可以正常工作，但是一旦有一些事件，该脚本就无法工作。我哪里出错了？
var countDownDate = dateAdd(new Date(), 4);
var flag = false;
var x = setInterval(function() {
callFun(countDownDate);
}, 1000);
var contin = function() {
flag = true;
document.getElementById("dialogBox").style.display = "none";
document.getElementById("demo").style.display = "block";
}
function dateAdd(date, units) {
var ret = new Date(date);
ret.setTime(ret.getTime() + units * 1000);
return ret;
}
var callFun = function(countDownDate) {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="demo"
document.getElementById("demo").innerHTML = minutes + "m " + seconds + "s ";
// If the count down is finished, write some text
if (distance <= 0) {
document.getElementById("demo").style.display = "none";
clearInterval(x);
document.getElementById("dialogBox").style.display = "block";
}
}
$('*').on('blur change click dblclick error focus focusin focusout hover keydown keypress keyup load mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup resize scroll select submit', function(x1) {
countDownDate = dateAdd(new Date(), 4);
flag = true;
});
if (flag) {
var z = setInterval(function() {
alert('will logout now....');
document.getElementById("dialogBox").style.display = "none";
clearInterval(z);
}, 8000);
}body {
margin: 0px;
padding: 0px;
}
#main {
margin: 0px auto;
padding: 0px;
width: 900px;
position: relative;
}
pre {
background: #F8F8D2;
padding: 10px;
border: 2px solid #673E3E;
border-radius: 3px;
color: #222222;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="main">
<p id="demo"></p>
<div id="dialogBox" style="display:none;">
<h3>Do you want to be logged in?</h3>
<button value="Continue" onclick="contin();">Continue</button>
<button value="Logout">Logout</button>
</div>
</div>
</body>最佳答案
希望以下解决方案对您有所帮助。当显示对话框时，我再检查 3 秒是否有事件，如果没有事件，则调用 logout 函数。对 contin、callFun 和 logout 函数进行了更改。
var countDownDate = dateAdd(new Date(), 4);
var flag = false;
var idleInterval, buttonInterval;
var x = setInterval(function () {
callFun(countDownDate);
}, 1000);
var contin = function () {
flag = true;
document.getElementById("dialogBox").style.display = "none";
document.getElementById("demo").style.display = "block";
document.getElementById("demo").innerHTML = "0m 0s";
clearInterval(idleInterval);
buttonInterval = setInterval(function () {
callFun(countDownDate);
}, 1000);
}
function dateAdd(date, units) {
var ret = new Date(date);
ret.setTime(ret.getTime() + units * 1000);
return ret;
}
var callFun = function (countDownDate) {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="demo"
document.getElementById("demo").innerHTML = minutes + "m " + seconds + "s ";
clearInterval(idleInterval);
// If the count down is finished, write some text
if (distance <= 0) {
document.getElementById("demo").style.display = "none";
document.getElementById("dialogBox").style.display = "block";
clearInterval(x);
clearInterval(buttonInterval);
flag = false;
idleInterval = setInterval(logOut, 3000);
}
}
function logOut() {
if (!flag){
console.log("Log out");
document.getElementById("dialogBox").style.display = "none";
clearInterval(idleInterval);
}
}
$('*').on('blur change click dblclick error focus focusin focusout hover keydown keypress keyup load mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup resize scroll select submit', function (x1) {
countDownDate = dateAdd(new Date(), 4);
flag = true;
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
body {
margin: 0px;
padding: 0px;
}
#main {
margin: 0px auto;
padding: 0px;
width: 900px;
position: relative;
}
pre {
background: #F8F8D2;
padding: 10px;
border: 2px solid #673E3E;
border-radius: 3px;
color: #222222;
}
</style>
<div id="main">
<p id="demo"></p>
<div id="dialogBox" style="display:none;">
<h3>Do you want to be logged in?</h3>
<button value="Continue" onclick="contin();">Continue</button>
<button value="Logout">Logout</button>
</div>
</div>关于javascript - 在 JavaScript 中检查浏览器不活动状态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46237532/