使用?JS?判斷用戶是否處于活躍狀態(tài)的案例詳解
更新時(shí)間：2024年05月17日 09:02:40 作者：燈會(huì)發(fā)光
這篇文章主要介紹了如何使用?JS?判斷用戶是否處于活躍狀態(tài),案例演示了如何獲取用戶活躍狀態(tài),時(shí)間閾值定為5秒,超出該閾值沒有操作表示非活躍,否則屬于正在活躍中,需要的朋友可以參考下
有時(shí)候，我們需要在網(wǎng)頁(yè)判斷用戶是否處與非活躍狀態(tài)，如果用戶長(zhǎng)時(shí)間沒有在頁(yè)面上進(jìn)行任何操作，我們則判定該用戶是非活躍的。 在 javascript 中我們可以通過監(jiān)聽某些鼠標(biāo)或鍵盤相關(guān)的事件來(lái)判定用戶是否在活躍中。
案例演示
在線演示 - 使用 JS 判斷用戶是否處于活躍狀態(tài)
實(shí)現(xiàn)代碼
案例演示了如何獲取用戶活躍狀態(tài)，時(shí)間閾值定為5秒，超出該閾值沒有操作表示非活躍，否則屬于正在活躍中
html
<p id="userState"></p>
js
//活躍狀態(tài)，true活躍中，false非活躍
let state = false;
//定時(shí)器
let timer = null;
//非活躍判定閾值，5秒沒有任何活動(dòng)表示非活躍
let timeout = 5000;
//用于展示狀態(tài)信息的html元素
let userStateEl = document.getElementById('userState');
//批量添加事件監(jiān)聽
[
'mousemove', //鼠標(biāo)移動(dòng)
'mousedown', //鼠標(biāo)按下
'touchstart', //觸摸屏幕（移動(dòng)端）
'wheel', //鼠標(biāo)滾輪
'resize', //頁(yè)面尺寸變化
'keydown', //鍵盤輸入
]
.map(event =>{
window.addEventListener(event, onActive)
})
//觸發(fā)活躍中
function onActive(){
//更新狀態(tài)
state = true;
renderState();
//重置定時(shí)器
clearTimeout(timer);
timer = setTimeout(() =>{
state = false;
renderState();
}, timeout);
}
//更新狀態(tài)信息
function renderState(){
if(state){
userStateEl.textContent = "活躍中 "
} else {
userStateEl.textContent = "?非活躍狀態(tài)"
}
}
//立刻觸發(fā)一次活躍中
onActive();到此這篇關(guān)于如何使用 JS 判斷用戶是否處于活躍狀態(tài)的文章就介紹到這了,更多相關(guān)如何使用 JS 判斷用戶是否處于活躍狀態(tài)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文給大家總結(jié)了js編碼規(guī)范知識(shí)，非常實(shí)用，在日常程序開發(fā)中經(jīng)?？梢杂玫?，大家務(wù)必掌握2016-06-06
本篇文章通過兩種方法給大家介紹js給span標(biāo)簽賦值的方法，兩種方法都比較不錯(cuò)，特此分享給大家，供大家學(xué)習(xí)2015-11-11
這篇文章通過代碼給大家介紹了JS判斷是否是微信掃碼的方法，非常不錯(cuò)，需要的朋友參考下吧2017-08-08
Three.js實(shí)現(xiàn)臉書元宇宙3D動(dòng)態(tài)Logo效果
本文主要講述通過 Three.js + Blender 技術(shù)棧，實(shí)現(xiàn) Meta 公司炫酷的 3D 動(dòng)態(tài) Logo，內(nèi)容包括基礎(chǔ)模型圓環(huán)、環(huán)面扭結(jié)、管道及模型生成、模型加載、添加動(dòng)畫、添加點(diǎn)擊事件、更換材質(zhì)等2021-11-11
JS實(shí)現(xiàn)定時(shí)任務(wù)每隔N秒請(qǐng)求后臺(tái)setInterval定時(shí)和ajax請(qǐng)求問題
這篇文章主要介紹了JS實(shí)現(xiàn)定時(shí)任務(wù)每隔N秒請(qǐng)求后臺(tái)setInterval定時(shí)和ajax請(qǐng)求 的相關(guān)資料,需要的朋友可以參考下2017-10-10
JavaScript時(shí)間戳與時(shí)間的轉(zhuǎn)化常用方法
在 JavaScript 中,時(shí)間戳（Timestamp）通常指Unix時(shí)間戳,即從1970年1月1日 00:00:00 UTC到某個(gè)時(shí)間點(diǎn)經(jīng)過的毫秒數(shù),下面給大家介紹JavaScript時(shí)間戳與時(shí)間的轉(zhuǎn)化常用方法,感興趣的朋友一起看看吧2025-05-05
這篇文章主要介紹了用Node.js通過sitemap.xml批量抓取美女圖片的方法和相關(guān)代碼，有需要的小伙伴可以參考下。2015-05-05
本文給大家簡(jiǎn)單介紹了JS瀏覽器的三種彈窗，簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-07-07
JavaScript函數(shù)擴(kuò)展與箭頭函數(shù)超詳細(xì)講解
這篇文章主要介紹了JavaScript函數(shù)擴(kuò)展與箭頭函數(shù)的使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-11-11
這篇文章主要介紹了typescript配置alias，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08