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);
          }
        }
      }
    
  • 相关阅读:
    js中的异常处理
    CSS3之box-sizing属性
    AJAX
    NaN与Null与undefiined的关系
    跳转语句之continue与break
    npm火速上手
    程序里面的‘脑筋急转弯’
    css伪元素::before与::after
    常用正则表达式、JS中的正则以及ES6的扩展
    git
  • 原文地址:https://www.cnblogs.com/unclefang/p/10408086.html
Copyright © 2011-2022 走看看