JavaScript实现会话超时倒计时需用setTimeout递归更新DOM，监听click/keydown/scroll/focus事件重置；结合document.hidden控制可见性，调用服务端keepalive接口校准时间，降级使用本地计时并兼容IE11。
怎么用 JavaScript 实现页面会话超时倒计时
直接靠 HTML 本身做不到动态倒计时，必须用 JavaScript 控制。核心思路是：记录初始超时时间（比如 20 分钟），定时器每秒更新 innerHTML，同时监听用户交互重置倒计时。
常见错误现象：setInterval 没清除导致多个定时器叠加、用户切到其他标签页后倒计时不准、重置逻辑没覆盖所有交互事件（比如只监听 click 却漏了 keydown）。
- 推荐用
setTimeout递归代替setInterval，避免累积误差和清理麻烦 - 必须监听
click、keydown、scroll、focus四类事件，覆盖鼠标、键盘、滚动、窗口聚焦等活跃行为 - 倒计时结束时，建议先发一次
fetch尝试续期会话，失败再跳转登录页，别一到 0 就强制登出
如何防止用户切走标签页导致倒计时失效
浏览器在非活跃标签页中会节流 setTimeout/setInterval，可能让倒计时“卡住”。不能只依赖前端计时，得结合服务端心跳或时间戳校准。
使用场景：用户开着页面去回微信，5 分钟后回来发现已掉线——这不是前端倒计时不准，而是服务端 session 真的过期了。
- 每次重置倒计时前，调用一次
fetch('/api/keepalive')，服务端返回剩余秒数，前端以此为准重设倒计时 - 如果网络异常或接口失败，降级为本地倒计时，但加个标记
isFallingBack: true，后续恢复后立刻同步 - 用
document.hidden监听页面可见性变化，切走时暂停倒计时逻辑（不取消定时器，只冻结显示值），切回时立即校准
倒计时 DOM 更新卡顿或闪烁怎么办
高频更新 innerText 或 innerHTML 在低端设备上容易卡，尤其嵌套在复杂布局里。不是 JS 慢，是重排重绘代价高。
性能影响：每秒更新一次看似不多，但如果倒计时文本在 position: absolute 或触发 will-change 的容器里，可能引发合成层反复创建。
- 把倒计时数字单独抽成一个轻量
，避免更新父容器整个 innerHTML - 用
textContent替代innerHTML，杜绝 HTML 解析开销 - 格式化时间用
String.prototype.padStart(2, '0')，别拼接'0' + sec，后者在 sec=5 时变成 '05' 没问题，但 sec=12 会变 '012'
IE11 兼容要注意哪些细节
IE11 不支持 const/let 块级作用域、fetch、document.hidden，但很多内网系统还跑着它。
兼容性影响：直接用现代语法会导致脚本报错中断，倒计时完全不工作。
- 变量全用
var，函数用 function 声明，别写箭头函数 -
fetch换成XMLHttpRequest，封装个简易ajaxKeepalive()函数 -
document.hidden不存在时，fallback 到document.msHidden（IE10+ 支持） - 倒计时格式化别用
padStart，改用(sec
倒计时逻辑看着简单，真正难的是服务端时间与前端本地时间的对齐、后台任务被节流后的补偿策略、以及各种边界操作（比如用户刚点提交按钮倒计时就到了）。这些地方不细抠，上线后就是凌晨三点的告警电话。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
