使用Javascript判断用户活跃状态的实现方法

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

案例演示

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

实现代码

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

html

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();

下载案例源码

未经允许不得转载：大白鲨游戏网 » 使用Javascript判断用户活跃状态的实现方法