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

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

案例演示

5秒内不进行任何操作则显示非活跃状态

实现代码

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

html:


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

javascript:


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

节流

由于事件触发频率可能过高，你还可以给事件添加加节流操作以节约性能。我们可以使用 Lodash 的 throttle 函数进行节流

将上面的 window.addEventListener(event, onActive) 这部分代码更改为如下：


                window.addEventListener(event, _.throttle(onActive, 100));

此时 onActive 在 100ms 内只会执行一次，极大的节约了性能开销。

更多关于 Lodash throttle 函数内容可点击此链接查看 >