JS 实现页面长时间无操作退出至登录页的示例代码

在 Web 应用中，为了保障用户信息的安全和系统资源的合理利用，常常需要实现当用户在页面长时间无操作时自动退出到登录页的功能。下面将通过 JavaScript 来实现这一功能，并提供相应的示例代码。

我们需要定义一个变量来记录用户最后操作的时间。

var lastActivityTime = new Date().getTime();

接下来，我们添加一个事件监听器来监听页面上的鼠标移动和键盘操作事件。当这些事件发生时，更新用户的最后操作时间。

document.addEventListener('mousemove', function() {
    lastActivityTime = new Date().getTime();
});

document.addEventListener('keydown', function() {
    lastActivityTime = new Date().getTime();
});

然后，我们使用 setInterval 方法来定时检查用户的最后操作时间与当前时间的间隔。如果间隔超过了设定的阈值（例如 30 分钟），则执行退出操作。

setInterval(function() {
    var currentTime = new Date().getTime();
    var timeSinceLastActivity = currentTime - lastActivityTime;

    if (timeSinceLastActivity > 30 * 60 * 1000) {
        // 执行退出操作，例如跳转到登录页
        window.location.href = 'login.html';
    }
}, 1000); 

在上述代码中，每隔 1 秒钟检查一次时间间隔。当间隔超过 30 分钟时，通过修改 window.location.href 的值将页面重定向到登录页。

需要注意的是，此示例代码仅为简单的实现，在实际应用中，还需要考虑更多的因素，如页面的可见性（例如用户切换到其他标签页或最小化窗口时的处理）、不同类型的操作事件（如触摸事件等）的监听，以及与后端服务的交互来确保用户状态的正确更新等。

通过以上的 JavaScript 代码实现，可以有效地在用户长时间无操作时自动退出至登录页，增强了系统的安全性和稳定性。但在实际开发中，应根据具体的项目需求和技术架构进行适当的调整和优化。