vue技巧--计时器的设置

2020-07-01  本文已影响0人  随意_web

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

//我只写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。
(定时发送请求的方式不可取,性能损耗太大)

上一篇下一篇

猜你喜欢

热点阅读