微信小程序-子組件定時器的定義和銷燬

應用場景：

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