1、需求:在首页展示实时时间点儿,离开首页清除定时器,刚开始的做法:
父组件:
home.vue
<page-head ref="pageHead" />
activated() {
this.$nextTick(() => {
this.$refs.pageHead.startTime();
})
},
子组件
pageHead.vue
<div class="weather">
<span>{{ timeDate }}</span>
<span>{{ timeDay }}</span>
<span>{{ hourTime }}</span>
</div>
startTime() {
var today = new Date();
var yyyy = today.getFullYear();
var MM = today.getMonth() + 1;
var dd = today.getDate();
var hh = today.getHours();
var mm = today.getMinutes();
// 补零
MM = this.checkTime(MM);
dd = this.checkTime(dd);
mm = this.checkTime(mm);
hh = this.checkTime(hh);
var day; //用于保存星期(getDay()方法得到星期编号)
if (today.getDay() == 0) day = "星期日 ";
if (today.getDay() == 1) day = "星期一 ";
if (today.getDay() == 2) day = "星期二 ";
if (today.getDay() == 3) day = "星期三 ";
if (today.getDay() == 4) day = "星期四 ";
if (today.getDay() == 5) day = "星期五 ";
if (today.getDay() == 6) day = "星期六 ";
this.timeDate = yyyy + "." + MM + '.' + dd;
this.timeDay = day;
this.hourTime = hh + ':' + mm
clearTimeout(this.timer)
this.timer = setTimeout(() => {
this.startTime()
}, 1000); //每一秒中重新加载startTime()方法
// this.$once('hook:beforeDestroy',()=>{
// clearTimeout(this.timer);
// this.timer = null;
// })
},
2、这样是可以正常渲染以及展示的,但是问题清除不了定时器,尝试过以下方法:
子组件:
pageHead.vue
startTime() {
var today = new Date();
var yyyy = today.getFullYear();
var MM = today.getMonth() + 1;
var dd = today.getDate();
var hh = today.getHours();
var mm = today.getMinutes();
// 补零
MM = this.checkTime(MM);
dd = this.checkTime(dd);
mm = this.checkTime(mm);
hh = this.checkTime(hh);
var day; //用于保存星期(getDay()方法得到星期编号)
if (today.getDay() == 0) day = "星期日 ";
if (today.getDay() == 1) day = "星期一 ";
if (today.getDay() == 2) day = "星期二 ";
if (today.getDay() == 3) day = "星期三 ";
if (today.getDay() == 4) day = "星期四 ";
if (today.getDay() == 5) day = "星期五 ";
if (today.getDay() == 6) day = "星期六 ";
this.timeDate = yyyy + "." + MM + '.' + dd;
this.timeDay = day;
this.hourTime = hh + ':' + mm
clearTimeout(this.timer)
this.timer = setTimeout(() => {
this.startTime()
}, 1000); //每一秒中重新加载startTime()方法
// 第一种:
this.$once('hook:beforeDestroy',()=>{
clearTimeout(this.timer);
this.timer = null;
})
},
第二种:
beforeDestroy() {
console.log('触发了吗');
clearTimeout(this.timer);
this.timer = null;
},
第三种:
beforeRouteLeave(to, from, next) {
console.log('触发了吗');
clearTimeout(this.timer);
this.timer = null;
next()
},
3、以上三种都没效果,离开首页定时器还在触发,解决方法:不用子组件了,直接在父组件使用
父组件:
home.vue
<!-- <page-head ref="pageHead" :timeDate="timeDate" :timeDay="timeDay" :hourTime="hourTime"/> -->
<div class="pageHead">
<div class="weather">
<span>{{ timeDate }}</span>
<span>{{ timeDay }}</span>
<span>{{ hourTime }}</span>
</div>
<div class="enterBtn" @click="goSystem">进入管理系统</div>
</div>
// 获取当前时间点儿
startTime() {
var today = new Date();
var yyyy = today.getFullYear();
var MM = today.getMonth() + 1;
var dd = today.getDate();
var hh = today.getHours();
var mm = today.getMinutes();
// 补零
MM = this.checkTime(MM);
dd = this.checkTime(dd);
mm = this.checkTime(mm);
hh = this.checkTime(hh);
var day; //用于保存星期(getDay()方法得到星期编号)
if (today.getDay() == 0) day = "星期日 ";
if (today.getDay() == 1) day = "星期一 ";
if (today.getDay() == 2) day = "星期二 ";
if (today.getDay() == 3) day = "星期三 ";
if (today.getDay() == 4) day = "星期四 ";
if (today.getDay() == 5) day = "星期五 ";
if (today.getDay() == 6) day = "星期六 ";
this.timeDate = yyyy + "." + MM + '.' + dd;
this.timeDay = day;
this.hourTime = hh + ':' + mm
},
// 补零
checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
},
activated() {
this.$nextTick(() => {
this.startTime();
this.timer = setInterval(() => {
this.startTime()
}, 1000);
})
},
deactivated() {
clearInterval(this.timer);
this.timer = null;
}
4、解决:改为使用永久定时器setInterval,在触发定时器前调用一次方法,还有:在setInterval方法里调用startTime记得加上括号,离开组件清除定时器!
冬天来了,春天还会远吗?