页面超时退出

页面超时退出

页面长时间未操作主动退出，可以说是个很平常的需求。

代码展示

/**
*	domId 绑定元素
*	cb 超时回调
*	timeout 超时时间
*/
const timeoutExit= (function() {
    let timer = null	// 定义变量，用于存储 timer
    return function(domId, cb, timeout) {
    	
    	/** clear 方法 用于清除 timer**/
        const clear = function() {
            if (timer) clearTimeout(timer)
        }
        /** setTimer 方法 用于启动 timer**/
        const setTimer = function() {
            clear ()
            timer = setTimeout(() => {
                if (document.getElementById(domId)) cb()	// 这里用于判断，当前元素不存在时，不执行回调函数
                clear ()
            }, timeout * 1000)
        }
        clear ()
        setTimer()
        /** 当绑定元素被点击，证明页面有操作，重新设置timer **/
        document.getElementById(domId).onclick = () => {
            setTimer()
        }
    }
})()

代码分析

1. 这里用到了 闭包，使 timer 变量一直存在内存中，不会被垃圾回收掉
2. 多次调用 timeoutExit 方法，只会起一个 setTimeout
3. 可以用 class ,object 改写当前代码，保证每次调用的始终是 同一个实例。