当用户在指定页面上保持活跃时触发 JavaScript 函数

javascript

2024-03-15 20:09:03

在特定页面上用户活动后运行 JS 函数

当用户在特定页面上保持活跃状态一段时间后，我们经常需要触发某些操作。例如，可能需要显示提示消息、收集用户反馈或更新页面内容。然而，处理用户活动并相应地采取行动可能会很棘手，尤其是在涉及切换标签页或在移动设备上最小化浏览器的情况。

问题：如何在给定时间内用户在特定页面上处于活动状态后运行 JS 函数？

解决方案

以下步骤提供了一个健壮的解决方案，可以解决上述问题：

1. 定义活动时间间隔

首先，确定用户需要在页面上保持活动状态以触发操作的时间间隔。例如，可以将时间间隔设置为 30 秒。

2. 设置计时器

使用 setTimeout 函数设置一个计时器，在给定的时间间隔后触发。

3. 添加活动侦听器

监听页面上的用户活动，例如鼠标移动、键盘输入或页面滚动。每次检测到活动时，重置计时器。

4. 在计时器触发时运行函数

当计时器触发时，执行预期的 JavaScript 函数。

5. 处理标签页切换

使用 visibilitychange 事件处理标签页切换。当用户切换到其他标签页时，暂停计时器；当用户返回到原始标签页时，重新启动计时器。

6. 处理浏览器最小化（移动设备）

使用 pagehide 和 pageshow 事件处理移动设备上的浏览器最小化。当浏览器最小化时，暂停计时器；当浏览器重新打开时，重新启动计时器。

代码示例

// 定义活动时间间隔（以毫秒为单位）
const activityTimeout = 30000;

// 获取页面元素
const page = document.querySelector("body");

// 设置计时器
let timer = setTimeout(runFunction, activityTimeout);

// 添加活动侦听器
page.addEventListener("mousemove", resetTimer);
page.addEventListener("keydown", resetTimer);
page.addEventListener("scroll", resetTimer);

// 添加标签页切换侦听器
document.addEventListener("visibilitychange", handleVisibilityChange);

// 添加浏览器最小化侦听器（移动设备）
document.addEventListener("pagehide", handlePageHide);
document.addEventListener("pageshow", handlePageShow);

// 重置计时器函数
function resetTimer() {
  clearTimeout(timer);
  timer = setTimeout(runFunction, activityTimeout);
}

// 处理标签页切换函数
function handleVisibilityChange() {
  if (document.visibilityState === "hidden") {
    clearTimeout(timer);
  } else {
    resetTimer();
  }
}

// 处理浏览器最小化函数
function handlePageHide() {
  clearTimeout(timer);
}

function handlePageShow() {
  resetTimer();
}

// 要运行的函数
function runFunction() {
  // 在这里执行你的代码
}