使用 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 判断用户是否处于活跃状态内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文的内容基本上是基于“区域范围对象(Range objects)”这个概念来说的2011-05-05
javascript 事件查询综合,需要的朋友可以参考下。2010-03-03
这篇文章主要为大家介绍了JS生态系统加速之eslint解析器使用实例探索,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2024-01-01
这篇文章介绍了点击进行复制的JS代码实例，有需要的朋友可以参考一下2013-08-08
数组是我们编程中经常使用的的数据结构之一,在处理数组时，我们经常需要在数组中查找特定的值,下面这篇文章主要给大家介绍了关于如何用JS判断数组中是否存在某个值或者某个对象的值的相关资料,需要的朋友可以参考下2023-01-01
在实际的开发工作过程中，积累了一些常见又超级好用的 Javascript 技巧和代码片段，包括整理的其他大神的 JS 使用技巧，今天筛选了 9 个，以供大家参考2023-04-04
本文主要介绍了javascript立即执行函数表达式IIFE的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了微信小程序中如何使用flyio封装网络请求，Fly.js 通过在不同 JavaScript 运行时通过在底层切换不同的 Http Engine来实现多环境支持，但同时对用户层提供统一、标准的Promise API,需要的朋友可以参考下2019-07-07
用js实现键盘记录，要关注浏览器的三种按键事件类型，即keydown，keypress和keyup，它们分别对应onkeydown、onkeypress和onkeyup这三个事件句柄。一个典型的按键会产生所有这三种事件，依次是keydown，keypress，然后是按键释放时候的keyup。2010-02-02
最近小编在做一个项目，其中涉及到一个模块关于星座查询功能，即在文本框中输入一个生日值，点击按钮可以得到对应的星座，怎么实现这个需求呢？下面小编通过示例代码给大家介绍下，需要的朋友参考下吧2021-11-11
最新评论