应用场景:
1.多个页面需要定时器--将定时器划分为一个组件即可
销毁定时器的场景:
1.父页面正常返回时,即navigateBack;(onUnload--监听页面卸载)
2.父页面跳转到其他页面时,即redirectTo等;(onUnload--监听页面卸载)
3.父页面自身需要销毁定时器然后进行其他操作,适用于满足某些条件后销毁定时器;(执行定时器组件的清空定时器操作clearInterval)
4.定时器页面自身倒计时结束时;(clearInterval)
首先,创建定时器公共组件
附上我自己的js和json代码,整理过,wxml和wxss可以根据项目来
Component({
data: {
flag: false,//倒计时是否销毁,即clearInterval
showHours: '',//倒计时-显示小时
showMinutes: '',//倒计时-显示分钟
showSeconds: '',//倒计时-显示秒
},
properties: {
parentEndTime: {//父组件传过来的截止时间戳
type: Number
},
},
lifetimes: {
// 组件创建时执行--蛮重要的
attached: function () {
this.setData({
flag: false
})
this.setInitialTime();
},
},
methods: {
setInitialTime(){
let self = this;
self.timer = setInterval(() => {
//定时器页面自身倒计时结束时,需要销毁定时器
if (self.data.flag == true) {
clearInterval(self.timer);
return;
} else {
self.timeDown();
}
}, 1000);
},
//定时器运行时进行的逻辑处理,根据业务需求来
timeDown() {
let self = this;
const endTime = new Date(self.data.parentEndTime);//截止时间
const nowTime = new Date();//当前时间
let leftTime = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);//截止时间与当前时间的时间戳差
//定时器页面自身倒计时结束时,需要销毁定时器
if (leftTime <= 0) {
self.setData({
flag: true
})
}
//计算天,小时,分钟,秒 start
let d = Math.floor(leftTime / (24 * 60 * 60));
let h = self.formate(Math.floor(leftTime / (60 * 60) % 24));
let m = self.formate(Math.floor(leftTime / 60 % 60));
let s = self.formate(Math.floor(leftTime % 60));
if (parseFloat(h) <= 0) {
h = "00";
}
if (parseFloat(m) <= 0) {
m = "00";
}
if (parseFloat(s) <= 0) {
s = "00";
}
//计算天,小时,分钟,秒 end
self.setData({
showHours: h,
showMinutes: m,
showSeconds: s,
})
},
//格式化时间,小于10的时间为0开头
formate(time) {
if (time >= 10) {
return time
} else {
return `0${time}`
}
},
//用于父组件页面卸载时调用,来销毁定时器,这步一定要,不然页面返回或者跳到其他页面了,定时器其实还在运行
clearTimer(){
clearInterval(this.timer);
}
},
})
{
"component": true
}
然后,再页面引用定时器组件
附上我的wxml,js和json代码,整理过,一个页面有两个定时器
<view>
<time-count id="timer1" wx:if="istimer1Show" endTime="{{timer1EndTime}}"></time-count>
<time-count id="timer2" wx:if="istimer2Show" endTime="{{timer2EndTime}}"></time-count>
</view>
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
istimer1Show: true,//开始默认显示timer1的定时器
istimer2Show: false,//开始默认隐藏timer2的定时器
timer1EndTime: 0,//定时器1的截止时间戳-根据场景来赋值
timer2EndTime: 0,//定时器2的截止时间戳-根据场景来赋值
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function () {
this.init();
},
init() {
this.startTimer1();
},
//启动定时器1
startTimer1(){
this.timer1 = this.selectComponent('#timer1');
//此处启动定时器1的倒计时功能
this.timer1.setInitialTime();
}
//此方法在需要销毁定时器的函数里面调用就可以了,简单明了
destroyTimer(){
//判断定时器有没有显示,有得话选择定时器后,再调用定时器的销毁定时器函数就可以了
if (this.selectComponent('#timer1')) {
this.timer1 = this.selectComponent('#timer1');
this.timer1.clearTimer();
}
//用于页面有多个定时器的情况,比如执行某一操作后timer1不要了,启动timer2
if (this.selectComponent('#timer2')) {
this.timer2 = this.selectComponent('#timer2');
this.timer2.clearTimer();
}
}
/**
* 生命周期函数--监听页面卸载
*/
//页面卸载时要清空定时器,不然定时器会一直运行
onUnload: function () {
this.destroyTimer();
},
})
{
"navigationBarTitleText": "定时器父页面",
"usingComponents": {
"time-count": "../../../components/timer/timer",
}
}