zoukankan      html  css  js  c++  java
  • 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);
          }
        }
      }
    
  • 相关阅读:
    toj 2975 Encription
    poj 1797 Heavy Transportation
    toj 2971 Rotating Numbers
    zoj 2281 Way to Freedom
    toj 2483 Nasty Hacks
    toj 2972 MOVING DHAKA
    toj 2696 Collecting Beepers
    toj 2970 Hackle Number
    toj 2485 Card Tric
    js页面定位,相关几个属性
  • 原文地址:https://www.cnblogs.com/unclefang/p/10408086.html
Copyright © 2011-2022 走看看