前记:五天的南京下旬天气突然热起来了,洗澡澡吹着空调,想着不记录点什么也算是一种浪费;于是乎想起了之前改的一个web页面超时退出的js方法,在这里记录一下,也算对得起五月最后的一天。
言归正传:记得当时是要求另外一个同事加的页面超时退出的方法,当同事离职看他的代码却发现:他是通过判断页面是否有按钮按下来判断页面是否存在操作;个人觉得不妥,查了一些网上的说法,结合自己的看法,最终觉得还是通过鼠标的移动来判断页面是否存在操作更给合理。
思路:使用 mousemover 事件来监测是否有用户操作页面,写一个定时器间隔特定时间检测是否长时间未操作页面,如果是,退出;反之亦然。
代码(JS):
var lastTime = new Date().getTime();
var currentTime = new Date().getTime();
var timeOut = 10 * 60 * 1000; //设置超时时间: 10分
window.onload = function() {
window.document.onmousemove = function() {
lastTime = new Date().getTime(); //更新操作时间
}
};
function testTime() {
currentTime = new Date().getTime(); //更新当前时间
if (currentTime - lastTime > timeOut) { //判断是否超时
console.log("超时");
}
}
/* 定时器 间隔1秒检测是否长时间未操作页面 */
window.setInterval(testTime, 1000);
代码(jq):
var lastTime = new Date().getTime();
var currentTime = new Date().getTime();
var timeOut = 10 * 60 * 1000; //设置超时时间: 10分
$(document).ready(function(){
/* 鼠标移动事件 */
$(document).mousemove(function(){
lastTime = new Date().getTime(); //更新操作时间
});
});
function testTime(){
currentTime = new Date().getTime(); //更新当前时间
if(currentTime - lastTime > timeOut){ //判断是否超时
console.log("超时");
}
}
/* 定时器 间隔1秒检测是否长时间未操作页面 */
window.setInterval(testTime, 1000);