检查元素是否在 x 秒前创建

Question

问题

我想检查一个元素是否是在 60 秒前创建的。 因此，使用 vue，文本应该自动从

此文本是否小于 60 秒？ 真的

到

此文本是否小于 60 秒？ 错误的

60 秒后。

然而，似乎无论是setTimeout完全不或运行Date.now()内的setTimout不更新。 我该如何解决这个问题？

html

<div id="app">
  Is this text younger than 60 seconds?
  <br>
  {{ isNew }}
</div>

js

new Vue({
  el: "#app",
  data: {
        isNew: false
  },
  methods: {
    checkIfIsNew() {
      let dateTimeToCheck = Date.parse("2021-11-03 18:16:00") // replace this hardcodeed datetime
      let seconds = (Date.now() - dateTimeToCheck) / 1000;
      console.log(seconds);
      if (seconds < 60) {
        this.isNew = true;
      } else {
        this.isNew = false;
      }
      if (this.isNew) {
        setTimeout(this.checkIfIsNew, 10*1000);
      }
    },
  },
  created() {
    this.checkIfIsNew();
  },
})

https://jsfiddle.net/mhr5y1dp/

Answer 1

问题出在您没有在问题中发布的代码中，即您如何设置dateTimeToCheck 。 我认为您在每次调用checkIfIsNew设置的这个值比 Date.now() 早一分钟。 相反，您应该将此值设置在此函数之外或设置为常量值。

例如，在这个小提琴中， dateTimeToCheck设置为data组件的创建时间，代码运行得很好。

new Vue({
  el: "#app",
  data: {
        isNew: false,
        dateTimeToCheck: Date.now()
  },
  methods: {
    checkIfIsNew() {
        // let dateTimeToCheck = Date.parse("2021-11-03 18:16:00") // replace this hardcoded datetime
      let seconds = (Date.now() - this.dateTimeToCheck) / 1000;
      console.log(seconds);
      if (seconds < 60) {
        this.isNew = true;
      } else {
        this.isNew = false;
      }
      if (this.isNew) {
        setTimeout(this.checkIfIsNew, 10*1000);
      }
    },
  },
  created() {
    this.checkIfIsNew();
  },
})