Problema
Quiero verificar si un elemento se creó hace menos de 60 segundos. Por lo tanto, al usar vue, el texto debería cambiar automáticamente de
¿Este texto tiene menos de 60 segundos? verdadero
a
¿Este texto tiene menos de 60 segundos? falso
después de 60 segundos.
Sin embargo, parece que setTimeout no se ejecuta en absoluto o que Date.now() dentro de setTimout no se actualiza. ¿Como puedo resolver esto?
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(); }, })El problema está en el código que no publicó en su pregunta, es decir, cómo configura dateTimeToCheck . Creo que está configurando este valor con menos de un minuto de antigüedad que Date.now() en cada invocación de checkIfIsNew . En su lugar, debe establecer este valor fuera de esta función o en un valor constante.
Por ejemplo, en este violín , dateTimeToCheck se establece en el momento de creación del componente en data y el código funciona bien.
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(); }, })