JS实现页面长时间不操作退出到登录页面的示例代码

页面执行

index.php

1、在head标签中引入jquey和页面长时间不操作的js页面

<script src="./statics/base/js/jquery-1.8.3.min.js"></script>
<script src="./js/sessionTimeout.js"></script>

2、页面底部，在DOM加载完成之后调用初始化函数

<script>
    $(document).ready(function() {
        sessionTimeout.init();
    });
</script>

方法写入

sessionTimeout.js

(function (window) {//立即调用的函数表达式
    //设置时间，用户无操作多久后触发登出操作
    // let inactivityTimeout = 30 * 60 * 1000; // 30分钟
    let inactivityTimeout = 5 * 1000; // 5秒钟
    //定义一个变量timer，用于保存setTimeout返回的ID值，以便在需要时清除定时器。
    let timer;
    // 定义一个名为init的常量函数，用于初始化无操作超时功能，包括重置计时器和绑定事件监听器。
    const init = function () {
        resetInactivityTimeout();
        bindEvents();
    };
    // 定义一个名为resetInactivityTimeout的常量函数，用于清除当前计时器并重新设置一个新的计时器，如果inactivityTimeout内没有用户活动，则执行登出操作。
    const resetInactivityTimeout = function () {
        // 清除当前存在的计时器。
        clearTimeout(timer);
        // 设置一个新的计时器，等待inactivityTimeout指定的毫秒数后执行logout函数。
        timer = setTimeout(logout, inactivityTimeout);
    };
    // 定义一个名为bindEvents的常量函数，用于绑定鼠标移动、按键和鼠标点击等事件，当这些事件发生时，调用resetInactivityTimeout函数重置计时器。
    const bindEvents = function () {
        // 监听鼠标移动事件，每当鼠标移动时，重置计时器。
        document.addEventListener('mousemove', resetInactivityTimeout);
        // 监听键盘按键事件，每当用户按下键盘键时，重置计时器。
        document.addEventListener('keydown', resetInactivityTimeout);
        // 监听鼠标点击事件，每当用户点击鼠标时，重置计时器。
        document.addEventListener('mousedown', resetInactivityTimeout);
    };
    // 定义一个名为logout的常量函数，用于执行登出操作。
    const logout = function () {
        // 清除本地存储的信息并跳转到登录页面
        // localStorage.removeItem('access_token');
        // 当调用logout函数时，将页面URL更改为'./Logout.php'，从而实现页面跳转并登出系统。
        window.location.href = './Logout.php';
    };
    // 初始化函数。检查全局window对象上是否存在名为sessionTimeout的属性。如果不存在，则将其定义为一个包含init方法的对象。
    if (typeof window.sessionTimeout === 'undefined') {
        // 将init函数作为一个属性挂载到全局sessionTimeout对象上，使得在各页面中可以通过sessionTimeout.init()来启用无操作超时自动登出功能。
        window.sessionTimeout = {
            init: init
        };
    }
})(window);

到此这篇关于JS实现页面长时间不操作退出到登录页面的文章就介绍到这了,更多相关js长时间不操作退出登录页面内容请搜索站长课堂以前的文章或继续浏览下面的相关文章希望大家以后多多支持站长课堂!