微信小程序-子组件定时器的定义和销毁

应用场景：

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",
  }
}