美文网首页
vue技巧--计时器的设置

vue技巧--计时器的设置

作者: 随意_web | 来源:发表于2020-07-01 00:17 被阅读0次

    我觉得是一个很有趣的方式来触发计数器,看别人家代码照抄的

    //我只写vue单文件组件的js部分
    data(){
      return {
        count: 0,
        timer: null,
      }
    },
    created(){
      count ++
    },
    beforeDestroy(){
      clearTimeout(this.timer)
    },
    watch:{
      count(){
        this.counter()
      }
    },
    methods:{
      counter(){
        this.timer = setTimeout(() => {
          //这里面做计时需要的操作
          count ++;
        }, 1000)
      }
    }
    

    欢迎指正,欢迎延伸
    补充
    如果是每个循环列表中分别需要一个倒计时,写法会有点不同,解决方法之一是利用方法传参,参数就是后端反的剩余时间戳
    1.在发请求去数据的函数里,判断后端返回数组对象中是否存在时间戳>0的情况,存在则将上述count++
    2.watch监听count,遍历取到数据的数组,判断每一存在时间戳>0的项,将对应时间戳-1,同时count++,如果不存在则不操作
    3.此时时间戳的改变会映射到传入对应方法的参数,这是响应式,无需任何操作,over。
    (定时发送请求的方式不可取,性能损耗太大)

    相关文章

      网友评论

          本文标题:vue技巧--计时器的设置

          本文链接:https://www.haomeiwen.com/subject/stkqqktx.html