最可靠方案是用 setTimeout + clearTimeout 实现空闲超时检测：监听 mousemove、keydown、scroll、click、focusin 五类事件，每次触发重置定时器；首次进入即启动，页面不可见时也需重置；超时后应发登出请求并与服务端同步状态。
页面空闲超时检测用 setTimeout + clearTimeout 最可靠
浏览器没有原生“空闲超时”事件，必须靠自己记录用户操作时间。核心逻辑是：每次鼠标移动、键盘按下、滚动、点击等行为都重置倒计时；倒计时归零就触发警告。别依赖 visibilitychange 或 pagehide，它们只管页面是否可见，不管用户有没有真正在操作。
常见错误现象：setTimeout 只设一次却没清理，导致多个定时器叠加；监听了 click 却漏掉 keydown，用户按回车提交表单时就不重置；把倒计时设成 5 分钟但实际业务要求是 10 分钟无操作才警告，参数写错。
实操建议：
- 用一个全局变量（比如
idleTimer）存当前定时器 ID，每次重置前先clearTimeout(idleTimer) - 监听至少这 5 类事件：
mousemove、keydown、scroll、click、focusin（覆盖表单输入框聚焦） - 倒计时时间统一用毫秒，比如 10 分钟写成
10 * 60 * 1000，别手算成 600000 容易数错零 - 首次进入页面就调用一次重置函数，避免刚打开就立刻弹窗
beforeunload 不适合做超时警告，它只在关闭/跳转前触发
很多人搜到 beforeunload 就直接用，结果发现：用户还在页面上打字，什么都没干，突然弹出“离开页面？”——完全不符合“超时无操作”的语义。这个事件和用户活跃度无关，它只响应导航动作（比如点链接、输新 URL、关标签页），且现代浏览器对它的弹窗文案有严格限制（只能显示默认提示，不能自定义文字）。
立即学习“前端免费学习笔记（深入）”；
正确做法是：超时后自己调用 alert() 或显示自定义弹窗，再根据业务决定是否主动跳转或登出。如果真要防止用户意外关闭，beforeunload 可以作为第二道保险，但必须和空闲检测逻辑分开管理。
容易踩的坑：
- 在超时回调里写
window.onbeforeunload = () => "请保存数据"，这不会生效——beforeunload需要提前绑定，且仅对接下来的导航有效 - 用
confirm()替代alert()做超时提醒，用户点“取消”后页面还留在原地，但倒计时没重置，3 秒后又弹，形成死循环 - 把超时逻辑放在某个 Vue 组件的
mounted里，组件卸载后定时器没清除，造成内存泄漏
弹窗选 alert() 还是自定义 DOM？看场景
如果只是内部系统、管理员后台，且要求“简单粗暴能打断操作”，用 alert() 没问题——它强制暂停 JS，用户必须点确定才能继续，天然防误操作。但注意：移动端 Safari 会拦截连续 alert()，iOS 上可能只响一声没弹出；安卓某些 WebView 会把多次调用合并成一次。
如果是对外产品、需要品牌一致性、或要支持富文本/按钮回调，必须用自定义 DOM 弹窗。重点不是动画多炫，而是得处理好三件事：
- 弹窗出现时，给
body加style="overflow: hidden"，否则用户还能滚动背景页 - 点击遮罩层（
.overlay）要关闭弹窗，但点击内容区（.modal-content）不能关——得用event.stopPropagation() - 按
Esc键也要关闭，绑定keydown事件判断e.key === 'Escape'
性能影响：自定义弹窗比 alert() 多几毫秒渲染，但用户感知不到；真正要注意的是，别在弹窗里发起接口请求再等返回才允许关闭，这会让用户卡住。
超时后自动登出要和服务端状态同步
前端弹警告 ≠ 后端已登出。很多系统只前端清 localStorage、跳登录页，但用户用开发者工具删掉跳转逻辑，页面还能继续用——因为 session 还在服务端有效。所以超时警告之后，必须立刻发一个登出请求（哪怕只是 fetch('/api/logout', { method: 'POST' })），或者至少把 token 标记为失效。
关键细节：
- 登出请求失败时，不要静默吞掉错误，得在弹窗里追加提示：“登出失败，请手动刷新页面”
- 如果用户在警告弹窗期间做了操作（比如点了按钮），要立刻取消登出流程，并延长倒计时——这需要在弹窗显示时暂停倒计时，在用户操作后恢复
- 服务端 session 过期时间必须 ≥ 前端空闲超时时间，否则前端还没警告，后端已经踢人，页面发起请求全 401，体验断层
最常被忽略的一点：倒计时的起点不是页面加载完成，而是用户最后一次有效交互。如果用户打开页面后 15 分钟没动，但第 14 分钟切到其他标签页，回来时仍应从 1 分钟开始倒，而不是重新计 15 分钟——这意味着你得在 visibilitychange 事件里也重置定时器，而不是只靠用户操作事件。
