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

应用场景:

1.多个页面需要定时器

2.并且定时器到0时需要执行什么操作

销毁定时器的场景:

1.父页面正常返回时;(onUnload--监听页面卸载)

2.父页面跳转到其他页面时;(onUnload--监听页面卸载)

3.父页面自身需要销毁定时器然后进行其他操作;(执行定时器组件的清空定时器操作)

4.定时器页面自身倒计时结束时;(clearInterval)

具体,见下方代码和代码注释,js代码重点看,看懂了就会用了。

首先,创建定时器公共组件

附上我自己的js和json代码,整理过,wxml和wxss可以根据项目来

Component({
  data: {
    flag: false,
    childEndTime: '',//管理定时器组件自己倒计时的当前时间
    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 {
          let timestamp;
          //定时器刚开始运行时,需要获得父组件的时间进行初始化
          //定时器运行过程中,就处理正在
          if (self.data.childEndTime !== '') {
            timestamp = self.data.childEndTime;//定时器运行过程中的时间
          } else {
            timestamp = self.data.parentEndTime;//从父页面传过来的时间
          }
          self.setData({
            childEndTime: timestamp
          })
          self.timeDown();
        }
      }, 1000);
    },
    //定时器运行时进行的逻辑处理,根据业务需求来
    timeDown() {
      let self = this;
      const endTime = new Date(self.data.childEndTime);
      const nowTime = new Date();
      let leftTime = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);
      if (leftTime <= 0) {
        //定时器页面自身倒计时结束时,需要销毁
        self.setData({
          flag: true
        })
      }
      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";
      }
      self.setData({
        showHours: h,
        showMinutes: m,
        showSeconds: s,
      })
    },
    formate(time) {
      if (time >= 10) {
        return time
      } else {
        return `0${time}`
      }
    },
    //父页面销毁定时器函数的定义
    clearTimer(){
      this.setData({
        flag: true
      })
      //其实这一条就够了,不过为了保险,加上了上面flag的定义
      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,
    timer2EndTime: 0,
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function () {
    this.init();
  },
  init() {
    this.startTimer1();
  },
  //启动定时器1
  startTimer1(){
    this.timer1 = this.selectComponent('#timer1');
    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 () {
    if (this.selectComponent('#timer1')) {
      this.timer1 = this.selectComponent('#timer1');
      this.timer1.clearTimer();
    }
    if (this.selectComponent('#timer2')) {
      this.timer2 = this.selectComponent('#timer2');
      this.timer2.clearTimer();
    }
  },
})
{
  "navigationBarTitleText": "定时器父页面",
  "usingComponents": {
    "time-count": "../../../components/timer/timer",
  }
}

 

 

 

 

发布了23 篇原创文章 · 获赞 1 · 访问量 5412
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览