空闲时间是用户没有与网页交互的时间。
它可以是鼠标移动、页面点击或者用户使用键盘时。
可以使用 vanilla JavaScript 或者 jQuery 代码检测空闲时间。
原生 JavaScript
我们可以使用 vanilla JavaScript 来检测空闲时间：
let inactivityTime = function () {
let time;
window.onload = resetTimer;
document.onmousemove = resetTimer;
document.onkeypress = resetTimer;
function logout() {
console.log("您现在已注销。")
}
function resetTimer() {
clearTimeout(time);
time = setTimeout(logout, 2000)
}
};
inactivityTime();
console.log('请等待');
并在需要的地方初始化函数：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
<script>
let inactivityTime = function() {
let time;
window.onload = resetTimer;
document.onmousemove = resetTimer;
document.onkeypress = resetTimer;
function logout() {
alert("您现在已注销。")
}
function resetTimer() {
clearTimeout(time);
time = setTimeout(logout, 2000)
}
};
window.onload = function() {
inactivityTime();
}
</script>
</body>
</html>
如果需要，我们还可以添加更多 DOM 事件。
最常用的有以下几种：
let inactivityTime = function () {
let time;
window.onload = resetTimer;
document.onload = resetTimer;
document.onmousemove = resetTimer;
document.onmousedown = resetTimer; //touchscreen presses
document.ontouchstart = resetTimer;
document.onclick = resetTimer; //touchpad clicks
document.onkeypress = resetTimer;
document.addEventListener('scroll', resetTimer, true);
function logout() {
console.log("您现在已注销。")
}
function resetTimer() {
clearTimeout(time);
time = setTimeout(logout, 2000)
}
};
inactivityTime();
console.log('请等待');
要注册所需的事件，请使用数组：
window.addEventListener('load', resetTimer, true);
let events = ['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart'];
events.forEach(function (name) {
document.addEventListener(name, resetTimer, true);
});
DOM 事件
HTML DOM 事件允许 JavaScript 在 HTML 文档中的元素上注册不同的事件处理程序。
事件与功能协作。
在事件发生之前（例如当用户单击任何按钮时）不会调用该函数。
日期：2020-06-02 22:16:16 来源：oir作者：oir