如何使用 JS 判断用户是否处于活跃状态
有时候,我们需要在网页判断用户是否处与非活跃状态,如果用户长时间没有在页面上进行任何操作,我们则判定该用户是非活跃的。 在 javascript 中我们可以通过监听某些鼠标或键盘相关的事件来判定用户是否在活跃中。
案例演示
实现代码
案例演示了如何获取用户活跃状态,时间阈值定为5秒,超出该阈值没有操作表示非活跃,否则属于正在活跃中
html
<p id="userState"></p>
js
//活跃状态,true活跃中,false非活跃
let state = false;
//定时器
let timer = null;
//非活跃判定阈值,5秒没有任何活动表示非活跃
let timeout = 5000;
//用于展示状态信息的html元素
let userStateEl = document.getElementById('userState');
//批量添加事件监听
[
'mousemove', //鼠标移动
'mousedown', //鼠标按下
'touchstart', //触摸屏幕(移动端)
'wheel', //鼠标滚轮
'resize', //页面尺寸变化
'keydown', //键盘输入
]
.map(event =>{
window.addEventListener(event, onActive)
})
//触发活跃中
function onActive(){
//更新状态
state = true;
renderState();
//重置定时器
clearTimeout(timer);
timer = setTimeout(() =>{
state = false;
renderState();
}, timeout);
}
//更新状态信息
function renderState(){
if(state){
userStateEl.textContent = "活跃中 "
} else {
userStateEl.textContent = "❌非活跃状态"
}
}
//立刻触发一次活跃中
onActive();
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器