vue中使用定时器
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中使用定时器相关的知识,希望对你有一定的参考价值。
参考技术A 创建了一个任务后,有两种方式去查看任务状态:前端主动请求就可以用到定时器
注意:开始setInterval定时器:页面一进来或事件触发
结束定时器:页面离开前清除或者事件触发
如果是在keep-alive中的组件,组件的生命周期:
vue中使用setInterval()循环定时器的注意事项
问题描述
在我们做项目中,经常需要使用定时器做一些重复的任务,比如接口轮询更新数据等。本篇文章记录一下vue项目中使用定时器的一些注意事项。
注意事项
使用定时器的时候,主要是要注意使用定时器的以下情况
什么时候开始setInterval()定时器
- 页面一进来就使用定时器
- 或者以事件的形式比如点击按钮开始使用定时器
什么时候结束setInterval()定时器
- 页面离开时候清除定时器
- 或者以事件的形式比如点击按钮形式清除定时器
特别的需要注意,是否在被缓存组件中使用定时器
- 即是否在被keep-alive包裹的组件中使用定时器
情况一,普通情况下使用定时器
假设我们有两个按钮,点击一个开始定时器,点击另外一个结束定时器。代码如下:
<template>
<div>
<el-button type="primary" plain @click="start">点击开始定时器</el-button>
<el-button type="primary" plain @click="end">点击结束定时器</el-button>
</div>
</template>
<script>
export default {
data() {
return {
timer: null,// 初始定时器变量名为null
};
},
methods: {
start() {
// 将定时器名字赋值到变量中
this.timer = setInterval(() => {
console.log("开始---");
}, 1000);
},
end() {
clearInterval(this.timer);
this.timer = null // 这里最好清除一下,回归默认值
// 众所周知,定时器返回一个随机整数,用于表示定时器的编号,后面通过名字可以取消这个定时器的执行。
console.log(this.timer);
},
},
// 在离开这个页面的时候,(比如路由跳转到别的页面)必须要清除一下这个定时器,定时器不手动清除的话,会一直存在并执行
// 直到我们的项目服务停掉,或者关机。所以适当时候清除定时器是非常有必要的。不然耗费性能,且容易造成代码混乱
beforeDestroy() {
// js提供的clearInterval方法用来清除定时器
clearInterval(this.timer);
},
// beforeDestroy或destroyed钩子中都能去清除这个定时器
// destroyed() {
// // clearInterval(this.timer);
// },
};
</script>
如果是页面一进来就要执行定时器,可以在mounted钩子中写个定时器让其执行,注意要加上if判断,要把定时器清除掉。代码如下:
mounted钩子注册定时器要及时清除
mounted() {
this.getConsole()
/*
最初始情况,项目刚打开的时候,这个时候页面是必定没有定时器的,那么逻辑就会走else,这个时候就会注册一个定时器去循环调用相应逻辑代码
后续有三种情况
情况一:路由跳转,跳走了,就要清除这个定时器,所以在beforeDestroy钩子中要清除定时器
情况二:关闭项目,关闭项目了以后,系统就会自动停掉定时器,这个不用管它
情况三:刷新页面,这个时候vue组件的钩子是不会执行beforeDestroy和destroyed钩子的,所以
需要加上if判断一下,若还有定时器的话,就清除掉,所以这个就是mounted钩子的if判断的原因
*/
if (this.timer) {
clearInterval(this.timer);
} else {
this.timer = setInterval(this.getConsole, 1000);
}
},
methods: {
getConsole() {
console.log("定时器");
},
},
beforeDestroy() {
clearInterval(this.timer);
},
情况二,keep-alive中使用定时器
如果使用了keep-alive包裹组件后,组件的生命周期就是如下了:
- 初始进入组件离开 created ---> mounted ---> activated --> deactivated
- 后续进入和离开 activated --> deactivated
所以如果想要在keep-alive包裹的组件中使用定时器,并且想要在组件一进入就执行定时器,就只能在activated
钩子中写定时器的执行了,当然清除定时器就要写在deactivated
钩子里面了。因为使用了keep-alive包裹的组件就没有了beforeDestroy、destroyed这样的钩子了,而且mounted钩子也就只会执行一次了。
如果是点击事件执行或者清除定时器的话,正常写就行了
定时器执行:
activated () {
// 这里也要及时清除掉定时器
if(this.timer){
clearInterval(this.timer);
}else{
this.timer = setInterval(() => {
console.log("开始---");
}, 1000);
}
},
定时器清除:
deactivated () {
clearInterval(this.timer)
this.timer = null
},
如果想要了解keep-alive的更多详细用法,欢迎访问我的另一篇文章:https://segmentfault.com/a/11...
以上是关于vue中使用定时器的主要内容,如果未能解决你的问题,请参考以下文章