如何在用户1分钟无交互（非活跃）时触发JavaScript函数？

核心逻辑是监听用户的各类操作事件（点击、输入、鼠标移动等），每次检测到活跃操作就重置计时器；当计时器走完1分钟仍无用户操作时，触发目标函数。

具体实现代码 #

1. 基础变量与目标函数定义 #

// 存储计时器实例
let inactivityTimer;
// 非活跃超时阈值：1分钟（60000毫秒）
const INACTIVITY_TIMEOUT = 60000;

// 用户非活跃时要执行的函数
function handleInactivity() {
  // 这里替换成你的业务逻辑，比如自动保存表单、弹出提示等
  console.log('用户已1分钟未进行操作');
}

2. 计时器重置函数 #

每次用户有活跃操作时，清除当前计时器并重新计时：

function resetInactivityTimer() {
  clearTimeout(inactivityTimer);
  inactivityTimer = setTimeout(handleInactivity, INACTIVITY_TIMEOUT);
}

3. 绑定用户活跃事件 #

针对表单页面的场景，绑定覆盖用户操作的各类事件（包括表单输入、点击等）：

// 选择监听目标：如果只需要监听表单内操作，就用querySelector('form')
const listenTarget = document.querySelector('form') || document;

// 所有需要监听的活跃事件类型
const activityEvents = ['click', 'mousemove', 'keydown', 'scroll', 'input', 'change'];

// 批量绑定事件
activityEvents.forEach(eventName => {
  listenTarget.addEventListener(eventName, resetInactivityTimer);
});

4. 初始化计时器 #

页面加载完成后启动首次计时：

document.addEventListener('DOMContentLoaded', resetInactivityTimer);

可选优化 #

如果需要处理用户切换浏览器标签的场景，避免误触发，可以添加页面可见性监听：

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'visible') {
    // 页面重新可见时重置计时器
    resetInactivityTimer();
  } else {
    // 页面隐藏时暂停计时器
    clearTimeout(inactivityTimer);
  }
});

内容的提问来源于stack exchange，提问作者Sachio Shaan