vue列表數據倒計時存在的一些坑


vue 列表數據倒計時,在頁面銷毀前需要清除定時器,否着會報錯。

  export default {
    data() {
      return {
        list: []
      }
    },
    mounted() {
      for (let i in this.list) {
        this.countDown(i)
      }
    },
    destroyed() {
     // 在這個生命周期中清除定時器
      for (let i in this.list) {
        clearInterval(this.list[i].countDownFn);
      }
    },
    methods: {
      formatTime(s) {
        let Day = parseInt(s / 60 / 60 / 24, 10)
        let Hour = parseInt(s / 60 / 60 % 24, 10)
        let Minute = parseInt(s / 60 % 60, 10)
        let Second = parseInt(s % 60, 10)
        let res = {
          d: Day,
          h: (Hour + "").padStart(2, "0"),
          m: (Minute + "").padStart(2, "0"),
          s: (Second + "").padStart(2, "0")
        }
        return res;
      },
      countDown(i) {
        let item = this.list[i]
        this.list[i].countDownFn = setInterval(() => {
          item.time_remaining -= 1
          if (item.time_remaining <= 0) {
            clearInterval(this.list[i].countDownFn);
          } else {
            item.countDownTime = item.time_remaining > 0 ? this.formatTime(item.time_remaining) : {}
          }
        }, 1000);
      }
    }
  }


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM