是否有可能在JavaScript中检测“空闲”时间?
我的主要用例可能是预取或预加载内容。
我将空闲时间定义为用户不活动或没有任何CPU使用的时间段
当前回答
所有前面的答案都有一个始终活动的鼠标移动处理程序。如果处理程序是jQuery，那么jQuery执行的额外处理可以加起来。特别是当用户使用游戏鼠标时，每秒可能发生多达500个事件。
这个解决方案避免处理每一个鼠标移动事件。这导致一个小的时间误差，但你可以调整你的需要。
function setIdleTimeout(millis, onIdle, onUnidle) {
var timeout = 0;
startTimer();
function startTimer() {
timeout = setTimeout(onExpires, millis);
document.addEventListener("mousemove", onActivity);
document.addEventListener("keydown", onActivity);
document.addEventListener("touchstart", onActivity);
}
function onExpires() {
timeout = 0;
onIdle();
}
function onActivity() {
if (timeout) clearTimeout(timeout);
else onUnidle();
//since the mouse is moving, we turn off our event hooks for 1 second
document.removeEventListener("mousemove", onActivity);
document.removeEventListener("keydown", onActivity);
document.removeEventListener("touchstart", onActivity);
setTimeout(startTimer, 1000);
}
}
http://jsfiddle.net/9exz43v2/
其他回答
所有前面的答案都有一个始终活动的鼠标移动处理程序。如果处理程序是jQuery，那么jQuery执行的额外处理可以加起来。特别是当用户使用游戏鼠标时，每秒可能发生多达500个事件。
这个解决方案避免处理每一个鼠标移动事件。这导致一个小的时间误差，但你可以调整你的需要。
function setIdleTimeout(millis, onIdle, onUnidle) {
var timeout = 0;
startTimer();
function startTimer() {
timeout = setTimeout(onExpires, millis);
document.addEventListener("mousemove", onActivity);
document.addEventListener("keydown", onActivity);
document.addEventListener("touchstart", onActivity);
}
function onExpires() {
timeout = 0;
onIdle();
}
function onActivity() {
if (timeout) clearTimeout(timeout);
else onUnidle();
//since the mouse is moving, we turn off our event hooks for 1 second
document.removeEventListener("mousemove", onActivity);
document.removeEventListener("keydown", onActivity);
document.removeEventListener("touchstart", onActivity);
setTimeout(startTimer, 1000);
}
}
http://jsfiddle.net/9exz43v2/
是否有可能每10秒运行一个函数，并检查一个“计数器”变量?如果可能的话，你可以在页面上进行鼠标悬停，不是吗?
如果是，使用鼠标悬停事件重置“counter”变量。如果函数被调用，并且计数器在您预先确定的范围之上，那么执行您的操作。
我编写了一个小型ES6类来检测活动，并在空闲超时时触发事件。它涵盖了键盘，鼠标和触摸，可以激活和禁用，并且有一个非常精简的API:
const timer = new IdleTimer(() => alert('idle for 1 minute'), 1000 * 60 * 1);
timer.activate();
它不依赖于jQuery，不过您可能需要通过Babel来运行它以支持旧的浏览器。
https://gist.github.com/4547ef5718fd2d31e5cdcafef0208096
您可以使用下面提到的解决方案
var idleTime;
$(document).ready(function () {
reloadPage();
$('html').bind('mousemove click mouseup mousedown keydown keypress keyup submit change mouseenter scroll resize dblclick', function () {
clearTimeout(idleTime);
reloadPage();
});
});
function reloadPage() {
clearTimeout(idleTime);
idleTime = setTimeout(function () {
location.reload();
}, 3000);
}
我的回答受到了维贾伊的启发，但我认为这是一个更简短、更普遍的解决方案，我想把它分享给可能有帮助的人。
(function () {
var minutes = true; // change to false if you'd rather use seconds
var interval = minutes ? 60000 : 1000;
var IDLE_TIMEOUT = 3; // 3 minutes in this example
var idleCounter = 0;
document.onmousemove = document.onkeypress = function () {
idleCounter = 0;
};
window.setInterval(function () {
if (++idleCounter >= IDLE_TIMEOUT) {
window.location.reload(); // or whatever you want to do
}
}, interval);
}());
按照目前的情况，这段代码将立即执行，并在3分钟内没有鼠标移动或按键后重新加载当前页面。
它利用普通的JavaScript和立即调用的函数表达式以一种干净且自包含的方式处理空闲超时。
