如何使用 JS 判断用户是否处于活跃状态

灯会发光2024-05-16 22:02

有时候，我们需要在网页判断用户是否处与非活跃状态，如果用户长时间没有在页面上进行任何操作，我们则判定该用户是非活跃的。在 javascript 中我们可以通过监听某些鼠标或键盘相关的事件来判定用户是否在活跃中。

案例演示

在线演示 - 使用 JS 判断用户是否处于活跃状态

实现代码

案例演示了如何获取用户活跃状态，时间阈值定为5秒，超出该阈值没有操作表示非活跃，否则属于正在活跃中

复制代码

<p id="userState"></p>

html

复制代码

//活跃状态，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();

下载案例源码