如何在 JavaScript 中检测空闲时间

javascript

2022-08-29 23:00:20

是否可以在 JavaScript 中检测“空闲”时间？

我的主要用例可能是预取或预加载内容。

我将空闲时间定义为用户不活动或没有任何CPU使用率的时间段

答案 1

下面是一个使用 jQuery 的简单脚本，用于处理鼠标移动和按键事件。如果时间到期，页面将重新加载。

<script type="text/javascript">
    var idleTime = 0;
    $(document).ready(function () {
        // Increment the idle time counter every minute.
        var idleInterval = setInterval(timerIncrement, 60000); // 1 minute

        // Zero the idle timer on mouse movement.
        $(this).mousemove(function (e) {
            idleTime = 0;
        });
        $(this).keypress(function (e) {
            idleTime = 0;
        });
    });

    function timerIncrement() {
        idleTime = idleTime + 1;
        if (idleTime > 19) { // 20 minutes
            window.location.reload();
        }
    }
</script>

答案 2

使用 vanilla JavaScript：

var inactivityTime = function () {
    var time;
    window.onload = resetTimer;
    // DOM Events
    document.onmousemove = resetTimer;
    document.onkeydown = resetTimer;

    function logout() {
        alert("You are now logged out.")
        //location.href = 'logout.html'
    }

    function resetTimer() {
        clearTimeout(time);
        time = setTimeout(logout, 3000)
        // 1000 milliseconds = 1 second
    }
};

并在需要时初始化函数（例如：onPageLoad）。

window.onload = function() {
  inactivityTime();
}

如果需要，可以添加更多 DOM 事件。最常用的是：

document.onload = resetTimer;
document.onmousemove = resetTimer;
document.onmousedown = resetTimer; // touchscreen presses
document.ontouchstart = resetTimer;
document.onclick = resetTimer;     // touchpad clicks
document.onkeydown = resetTimer;   // onkeypress is deprectaed
document.addEventListener('scroll', resetTimer, true); // improved; see comments

或者使用数组注册所需的事件

window.addEventListener('load', resetTimer, true);
var events = ['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart'];
events.forEach(function(name) {
 document.addEventListener(name, resetTimer, true);
});

DOM 事件列表：http://www.w3schools.com/jsref/dom_obj_event.asp

记得使用，或根据您的需要。在这里，您可以看到它们之间的差异：JavaScript中的窗口，屏幕和文档之间有什么区别？windowdocument

使用@frank-conijn 更新的代码@daxchen改进：如果滚动位于可滚动元素内，则不会触发，因为滚动事件不会冒泡。在中，第三个参数告诉侦听器在捕获阶段而不是气泡阶段捕获事件。window.onscrollwindow.addEventListener('scroll', resetTimer, true)