使用 JS 判断用户是否处于活跃状态的案例详解

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

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