页面超时退出
页面长时间未操作主动退出,可以说是个很平常的需求。
代码展示
/**
* 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()
}
}
})()
代码分析
- 这里用到了 闭包,使 timer 变量一直存在内存中,不会被垃圾回收掉
- 多次调用 timeoutExit 方法,只会起一个 setTimeout
- 可以用 class ,object 改写当前代码,保证每次调用的始终是 同一个实例。