记一次小程序的倒计时的问题

小程序倒计时的写法

废话不多说，直接上代码，记录了我在写倒计时的时候遇到的坑

    // 倒计时
  	 countdowm(timestamp) {
  	      // console.log(timestamp); //传入结束的时间 如 2019-01-12 14:21:24
  	    let self = this
  	    clearInterval(this.timer)
  	    this.timer = setInterval(function() {
  	     // 用正则 改写传入结束时间，兼容iphone，苹果机型只支持year/month/day的写法，
  	      //这种写法在安卓适用
  	      let Endtimestamp = timestamp.replace(/-/g, '/')  
  	      let nowTime = new Date()
  	      let Year = nowTime.getFullYear()
  	      let Month = nowTime.getMonth() + 1 // 月份是从 0 开始的 所以需要+1
  	      let nowDate = nowTime.getDate()
  	      let Hours = nowTime.getHours()
  	      let Minutes = nowTime.getMinutes()
  	      let Seconds = nowTime.getSeconds()
  	      // 重新拼接的获取到的现在的时间
  	      let nowtimestamp = Year + '/' + Month + '/' + nowDate + ' ' + Hours + ':' + Minutes + ':' + Seconds
  	       // 转化时间戳后相减
  	      nowTime = new Date(nowtimestamp)
  	      let endTime = new Date(Endtimestamp)
  	      let t = endTime.getTime() - nowTime.getTime()
  	      // 判断时间戳的相差值，大于0表示结束日期比现在的日期要大
  	      if (t > 0) {
  	      // 初始化倒计时
  	        let day = Math.floor(t / (86400000))
  	        let hour = Math.floor((t / 3600000) % 24)
  	        let min = Math.floor((t / 60000) % 60)
  	        let sec = Math.floor((t / 1000) % 60)
  	        hour = hour < 10 ? '0' + hour : hour
  	        min = min < 10 ? '0' + min : min
  	        sec = sec < 10 ? '0' + sec : sec
  	        // 倒计时的显示
  	        let format = ''
  	        if (day > 0) {
  	          hour = Number(day * 24) + Number(hour)
  	          format = `${hour}:${min}:${sec}`
  	        }
  	        if (day <= 0 && hour > 0) {
  	          format = `${hour}:${min}:${sec}`
  	        }
  	        if (day <= 0 && hour <= 0) {
  	          format = `${min}:${sec}`
  	        }
  	        self.content = format
  	        self.$apply()
  	      } else {
  	          // alert(t)
  	        clearInterval(this.timer)
  	        self.content = self.endText
  	        self._callback() //如果还有需要在倒计时结束之后执行的代码
  	        self.$apply()
  	      }
  	    }, 1000)
  	  }
  	   //如果还有需要在倒计时结束之后执行的代码
  	  _callback() {
  	    if (this.callback && this.callback instanceof Function) {
  	      this.callback(...this)
  	    }
  	  }

多个倒计时

很多时候我们在做商城页面的时候，会遇到同一个页面里，会存在多多个不同的倒计时，下面是我的实现方法，
与上面大同小异，以下是代码，以及个人的理解，如果有错误，望大神指出改正

    // 倒计时
   	   countdowm(timestamp) {
   	      let self = this
        	  clearInterval(this.timer)
   	      this.timer = setInterval(function() {
   	        self.groupTimeArr = []  // 倒计时的数组
   	        // 在倒计时里进行循环传入结束时间的数组，对每个倒计时都执行上面的更改倒计时数值的操作
   	        //  在这里我这里可能会有一个问题，那就是内存泄漏的问题 暂时没有想到解决的方法，
   	        请看到这篇记录的大神，有空的话请留下你的见解，谢谢~~  （我之前看到的是小程序会自动杀内存，不知道对不对的）
   	        for (let i = 0; i < timestamp.length; i++) { 
   	          self.groupTimeArr.push(timestamp[i]) // 将当前的结束时间赋值到倒计时的数组
   	          // 用正则 改写传入结束时间，兼容iphone，苹果机型只支持year/month/day的写法，
   	          let Endtimestamp = self.groupTimeArr[i].end_time.replace(/-/g, '/')  
   	          let nowTime = new Date()
   	          let Year = nowTime.getFullYear()
   	          let Month = nowTime.getMonth() + 1
   	          let nowDate = nowTime.getDate()
   	          let Hours = nowTime.getHours()
   	          let Minutes = nowTime.getMinutes()
   	          let Seconds = nowTime.getSeconds()
   	          let nowtimestamp = Year + '/' + Month + '/' + nowDate + ' ' + Hours + ':' + Minutes + ':' + Seconds
   	          // console.log('现在的日期' + nowtimestamp)
   	
   	          nowTime = new Date(nowtimestamp)
   	          let endTime = new Date(Endtimestamp)
   	          let t = endTime.getTime() - nowTime.getTime()
   	          // console.log(endTime)
   	          // console.log(nowTime)
   	
   	          if (t > 0) {
   	            let day = Math.floor(t / (86400000))
   	            let hour = Math.floor((t / 3600000) % 24)
   	            let min = Math.floor((t / 60000) % 60)
   	            let sec = Math.floor((t / 1000) % 60)
   	            hour = hour < 10 ? '0' + hour : hour
   	            min = min < 10 ? '0' + min : min
   	            sec = sec < 10 ? '0' + sec : sec
   	            let format = ''
   	            if (day > 0) {
   	              hour = Number(day * 24) + Number(hour)
   	              format = `${hour}:${min}:${sec}`
   	            }
   	            if (day <= 0 && hour > 0) {
   	              format = `${hour}:${min}:${sec}`
   	            }
   	            if (day <= 0 && hour <= 0) {
   	              format = `${min}:${sec}`
   	            }
   	            self.$apply()
   	          } else {
   	            clearInterval(self.timer)
   	            self.groupTimeArr[i].Groupend_time = self.endText
   	            self.showTimeOut = true
   	            self._callback()  //如果还有需要在倒计时结束之后执行的代码
   	            self.$apply()
   	          }
   	        }
   	      }, 1000)
   	    }

进入重复进入倒计时页面，倒计时出现混乱的情况

我的demo是因为倒计时在退出页面的时候并没有清除的原因，只要在页面隐藏或者销毁的时候清除定时器就可以解决这个问题了，下面实现的代码

    // 页面销毁的时候
   	onUnload() {
   	 console.log(4)
   	 clearInterval(this.timer)
   	 this.timer = null
   	}
   	// 页面隐藏的时候
   	onHide() {
   	  clearInterval(this.timer)
   	  this.timer = null
   	}