借鉴:https://www.cnblogs.com/momo798/p/9177767.html
- 本文涉及 JS闭包、节流
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
timeOut: '',
};
},
created(){
this.isTimeOut();
},
methods: {
// 节流throttle代码(时间戳+定时器)
throttle(fn, wait) {
var timer = null;
var startTime = Date.now();
return function() {
var curTime = Date.now();
var remaining = wait - (curTime - startTime);
var context = this;
var args = arguments;
clearTimeout(timer);
if (remaining <= 0) {
fn.apply(context, args);
startTime = Date.now();
} else {
timer = setTimeout(fn, remaining);
}
}
},
handle() {
clearInterval(this.timeOut);
// console.log(Math.random());
if (this.$route.path == '/Login') {
return
}
this.timeOut = setInterval(()=>{
this.$message.success('长时间未操作,请重新登录')
this.$router.push({name: 'Login'})
},1000*60*10)
// },10000)
},
isTimeOut() {
document.body.onmouseup = this.throttle(this.handle, 1000);
document.body.onmousemove = this.throttle(this.handle, 1000);
document.body.onkeyup = this.throttle(this.handle, 1000);
document.body.onclick = this.throttle(this.handle, 1000);
document.body.ontouchend = this.throttle(this.handle, 1000);
window.addEventListener('resize', this.throttle(this.handle, 1000));
window.addEventListener('scroll', this.throttle(this.handle, 1000));
},
}
};
</script>
<style>
#app1 {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
height: 100vh;
}
</style>