問題
我想檢查一個元素是否是在 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/
uj5u.com熱心網友回復:
問題出在您沒有在問題中發布的代碼中,即您如何設定dateTimeToCheck. 我認為您在每次呼叫checkIfIsNew. 相反,您應該將此值設定在此函式之外或設定為常量值。
例如,在這個小提琴中,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();
},
})
轉載請註明出處,本文鏈接:https://www.uj5u.com/qita/348565.html
標籤:javascript Vue.js
