Vue遇到定时器不能有返回值吗。 我是用vue做倒计时的，加了定时器就不能在页面中显示，可以打印，但是不会更新时间。

  • Z时代
  • 2024-03-12
  • 分类：IT

Vue遇到定时器不能有返回值吗。 我是用vue做倒计时的，加了定时器就不能在页面中显示，可以打印，但是不会更新时间。

<div class="timeStyle">{{ payCountDown(item.createTime) }}</div>

payCountDown(value) {

  setInterval(() => {
    let countDown =
      7200000 - (new Date().getTime() - new Date(value).getTime());
    countDown -= 1000;
    if (countDown >= 0) {
      let hour = Math.floor((countDown / 1000 / 60 / 60) % 24);
      hour = hour.toString().length == 1 ? "0" + hour : hour;
      let minute = Math.floor((countDown / 1000 / 60) % 60);
      minute = minute.toString().length == 1 ? "0" + minute : minute;
      let seconds = Math.floor((countDown / 1000) % 60);
      seconds = seconds.toString().length == 1 ? "0" + seconds : seconds;
      console.log(hour + ":" + minute + ":" + seconds);
      return hour + ":" + minute + ":" + seconds;
    }
  }, 1000);
},

回答：

payCountDown这个方法不返回任何值，payCountDown(item.createTime)调用就只能得到undefined。
setInterval定时执行一定的逻辑，修改一些能够驱动视图的变量，从而在视图上显示倒计时。调用方法只是启动定时器的动作，启动定时器并没有相应的结果。

回答：

应该这么写
大概就这样写

<div class="timeStyle">{{  payCountDown }}</div>
<script>
 data () {
return { payCountDown : ''}
},
  mounted() {
 setInterval(() => {
    let countDown =
      7200000 - (new Date().getTime() - new Date(value).getTime());
    countDown -= 1000;
    if (countDown >= 0) {
      let hour = Math.floor((countDown / 1000 / 60 / 60) % 24);
      hour = hour.toString().length == 1 ? "0" + hour : hour;
      let minute = Math.floor((countDown / 1000 / 60) % 60);
      minute = minute.toString().length == 1 ? "0" + minute : minute;
      let seconds = Math.floor((countDown / 1000) % 60);
      seconds = seconds.toString().length == 1 ? "0" + seconds : seconds;
      console.log(hour + ":" + minute + ":" + seconds);
      this.payCountDown = hour + ":" + minute + ":" + seconds;
    }
  }, 1000);
  },
</script>

以上是 Vue遇到定时器不能有返回值吗。 我是用vue做倒计时的，加了定时器就不能在页面中显示，可以打印，但是不会更新时间。 的全部内容， 来源链接： utcz.com/p/937019.html

回到顶部