Jetzt stehe ich vor einem solchen Problem:
對(duì)于webapp 有一個(gè)活動(dòng)列表,列表里每個(gè)活動(dòng)有一個(gè)倒計(jì)時(shí),
一旦把a(bǔ)pp切入后臺(tái),js 計(jì)時(shí)器就不在生效了,導(dǎo)致倒計(jì)時(shí)不準(zhǔn)確,
有想過(guò)解決方法,監(jiān)聽(tīng)visibilitychange事件,觀察document.visibilityState
Ich m?chte eine Komponente oder Funktion erstellen, die alle Countdown-Probleme auf der Seite l?sen kann,
aber ich stecke bei meiner Idee fest und frage mich, ob die Experten gute Ideen, L?sungen oder Informationen haben?
Vielen Dank!
Erg?nzungsfrage:
Als ich den Timer auf meinem Telefon debuggte, ?ffnete ich dieselbe Seite in WeChat und im Standardbrowser meines Telefons,
schaltete jeweils in den Hintergrund und stellte fest, dass der Seiten-Timer in WeChat noch lief, und zwar im Standardbrowser hatte aufgeh?rt zu laufen.
Beim Drucken im Standardbrowser des Mobiltelefons ist document.visibilityState undefiniert, aber wenn die Webseite in WeChat ausgeführt wird, kann sie normal gedruckt werden.
Entschuldigung, warum? Hat WeChat etwas dagegen unternommen?
與手機(jī)系統(tǒng)時(shí)間進(jìn)行比較;
如果還不放心,在app 打開(kāi)的時(shí)候與后端的系統(tǒng)時(shí)間進(jìn)行比較。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p id="app">
<ul>
<li v-for="item in items">
<com1 :value="item.time"></com1>
</li>
</ul>
</p>
<script src="https://cdn.bootcss.com/moment.js/2.17.1/moment.min.js"></script>
<script src="http://cdn.bootcss.com/rxjs/5.2.0/Rx.min.js"></script>
<script src="http://cdn.bootcss.com/vue/2.1.0/vue.min.js"></script>
<script>
const source = Rx.Observable.interval(1000);
Vue.component('com1', {
props: ['value'],
data() {
return {
count: null,
}
},
created() {
source.subscribe(count => this.count = count % 2);
},
template: '<p>距離 {{ value | date("HH:mm:ss") }} 還有 {{ seconds }}s</p>',
computed: {
seconds() {
this.count;
return Math.abs(moment().diff(this.value, 'seconds'));
}
},
filters: {
date(val, format) {
if (val) return moment(val).format(format || 'YYYY-MM-DD HH:mm:ss')
return val
}
}
});
new Vue({
el: '#app',
data() {
return {
items: []
}
},
created() {
for (var i = 0; i < 10; i++) {
this.items.push({
time: moment().add(i + 1, 'hours')
})
}
}
})
</script>
</body>
</html>