如何在 JavaScript 中检测用户空闲时间以优化 Web 应用程序？

JavaScript 中的空闲时间检测

检测空闲时间对于优化 Web 应用程序中的用户体验至关重要，例如预加载内容或注销不活动用户。在 JavaScript 中，空闲时间可以定义为用户不活动或最低 CPU 使用率的一段时间。

使用 Vanilla JavaScript 检测空闲时间

要使用 vanilla JavaScript 检测空闲时间，您可以实现一个函数利用 DOM 事件来监视用户活动。下面是一个示例实现：

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
  }
};

调用 inactivityTime() 函数在需要时初始化空闲时间检测，例如在页面加载时：

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

使用其他 DOM 事件

为了提高检测精度，您可以添加更多 DOM 事件来监控用户交互。一些常用的事件包括：

• document.onload
• document.onmousemove
• document.onmousedown
• 文档。 ontouchstart
• document.onclick
• document.onkeydown
• document.addEventListener('scroll', resetTimer, true) （用于处理可滚动元素内部滚动的改进版本）

在捕获阶段处理事件

要确保在捕获阶段捕获事件，请使用第三个参数在 addEventListener() 中如下：

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

通过结合这些技术，您可以有效地检测 JavaScript 中的空闲时间并采取采取适当的措施来增强用户体验。

以上是如何在 JavaScript 中检测用户空闲时间以优化 Web 应用程序？的详细内容。更多信息请关注PHP中文网其他相关文章！