IdleDetector 是 HTML5 实验性 API，用于通过 userState 和 screenState 判断用户空闲状态，需 HTTPS、Chrome 112+、启用 flag 并获 idleDetection 权限，支持阈值设置与 change 事件监听，兼容性有限需降级方案。
IdleDetector 是 HTML5 的一项实验性 API，用于检测用户是否处于空闲（idle）状态，比如长时间未移动鼠标、未按键盘、屏幕已锁定或设备已休眠。它本身不能直接检测“是否离开电脑”，但可通过判断用户交互中断 + 系统空闲状态，间接推测用户可能已离开。需注意：该 API 目前仅在 Chrome 112+（桌面端）、启用 chrome://flags/#enable-idle-detection 且网站为 HTTPS、用户已授予“idleDetection”权限时可用。
前提条件与权限申请
IdleDetector 是受保护的 API，必须满足以下全部条件才能使用：
- 网站运行在 HTTPS 协议下（localhost 也允许）
- 用户已通过
navigator.permissions.query({ name: 'idleDetection' })明确授予权限 - Chrome 浏览器版本 ≥ 112，且在 chrome://flags 中启用了 “Enable Idle Detection API”
- 调用必须由用户手势（如点击、按键）触发，不可在页面加载时自动启动
初始化并监听空闲状态
创建 IdleDetector 实例后，设置空闲阈值（如 60 秒），并监听 change 事件：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
let idleDetector;
async function startIdleDetection() {
if (!('IdleDetector' in window)) {
console.warn('IdleDetector not supported');
return;
}
try {
// 请求权限（需用户主动触发，例如点击按钮）
const permission = await navigator.permissions.query({ name: 'idleDetection' });
if (permission.state === 'granted') {
idleDetector = new IdleDetector();
idleDetector.addEventListener('change', () => {
const { userState, screenState } = idleDetector;
console.log('User state:', userState); // 'active', 'idle', 'locked'
console.log('Screen state:', screenState); // 'locked', 'unlocked'
if (userState === 'idle' || screenState === 'locked') {
pauseLongRunningTask(); // 自定义暂停逻辑
} else if (userState === 'active') {
resumeTask(); // 用户回来时恢复
}
});
// 设置空闲判定时间为 60 秒（默认 60，范围 60–300 秒）
await idleDetector.start({ threshold: 60_000 });
} else {
console.log('Permission denied or prompt dismissed');
}
} catch (err) {
console.error('Idle detection setup failed:', err);
}
}
配合任务暂停的实用建议
自动暂停任务需兼顾用户体验与可靠性：
立即学习“前端免费学习笔记（深入）”；
-
不要仅依赖单一状态：同时检查
userState === 'idle'和screenState === 'locked'，提高判断准确性 - 避免误触发暂停：空闲检测有延迟（通常数秒），建议加 5–10 秒防抖，防止用户短暂停顿就被暂停
- 暂停前给予提示（可选）：检测到 idle 后，先显示轻量提示（如顶部横幅），3 秒后无操作再暂停
- 保存关键进度：暂停时应同步保存当前任务状态（如表单草稿、播放位置、计时器剩余时间）
- 手动恢复入口不可少：提供显眼的“继续”按钮，尤其当自动恢复逻辑不完善时
兼容性与降级方案
由于 IdleDetector 兼容性有限（仅 Chromium 新版支持），生产环境必须提供降级策略：
- 使用
visibilitychange事件监听标签页是否隐藏（document.hidden） - 结合
blur/focus监听窗口失焦/获得焦点 - 用
setTimeout+ 鼠标/键盘事件监听模拟简易空闲检测（精度低但通用） - 对非支持环境，默认保持任务运行，或仅在用户明确点击“暂停”时才停止
