如何使用 JS 判斷用戶是否處於活躍狀態

有時候，我們需要在網頁判斷用戶是否處與非活躍狀態，如果用戶長時間沒有在頁面上進行任何操作，我們則判定該用戶是非活躍的。 在 javascript 中我們可以通過監聽某些鼠標或鍵盤相關的事件來判定用戶是否在活躍中。

案例演示

在線演示 - 使用 JS 判斷用戶是否處於活躍狀態

實現代碼

案例演示瞭如何獲取用戶活躍狀態，時間閾值定爲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();

下載案例源碼