使用 JS 判断用户是否处于活跃状态的案例详解
更新时间：2024年05月17日 09:02:40 作者：灯会发光
这篇文章主要介绍了如何使用 JS 判断用户是否处于活跃状态,案例演示了如何获取用户活跃状态,时间阈值定为5秒,超出该阈值没有操作表示非活跃,否则属于正在活跃中,需要的朋友可以参考下
有时候，我们需要在网页判断用户是否处与非活跃状态，如果用户长时间没有在页面上进行任何操作，我们则判定该用户是非活跃的。 在 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();到此这篇关于如何使用 JS 判断用户是否处于活跃状态的文章就介绍到这了,更多相关如何使用 JS 判断用户是否处于活跃状态内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文给大家总结了js编码规范知识，非常实用，在日常程序开发中经常可以用到，大家务必掌握2016-06-06
本篇文章通过两种方法给大家介绍js给span标签赋值的方法，两种方法都比较不错，特此分享给大家，供大家学习2015-11-11
这篇文章通过代码给大家介绍了JS判断是否是微信扫码的方法，非常不错，需要的朋友参考下吧2017-08-08
本文主要讲述通过 Three.js + Blender 技术栈，实现 Meta 公司炫酷的 3D 动态 Logo，内容包括基础模型圆环、环面扭结、管道及模型生成、模型加载、添加动画、添加点击事件、更换材质等2021-11-11
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
这篇文章主要介绍了JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求 的相关资料,需要的朋友可以参考下2017-10-10
在 JavaScript 中,时间戳（Timestamp）通常指Unix时间戳,即从1970年1月1日 00:00:00 UTC到某个时间点经过的毫秒数,下面给大家介绍JavaScript时间戳与时间的转化常用方法,感兴趣的朋友一起看看吧2025-05-05
这篇文章主要介绍了用Node.js通过sitemap.xml批量抓取美女图片的方法和相关代码，有需要的小伙伴可以参考下。2015-05-05
本文给大家简单介绍了JS浏览器的三种弹窗，简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2018-07-07
这篇文章主要介绍了JavaScript函数扩展与箭头函数的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-11-11
这篇文章主要介绍了typescript配置alias，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
最新评论