现在遇到这么一个问题：
极客观点
项目管理
HarmonyOS
对于webapp 有一个活动列表，列表里每个活动有一个倒计时，
一旦把app切入后台，js 计时器就不在生效了，导致倒计时不准确，
有想过解决方法，监听visibilitychange事件，观察document.visibilityState
想做出一个组件或者函数，能把页面上所有的倒计时问题解决，
但是思路卡主了，不知道各路大神么有没有什么好的想法、解决方案，或者资料？
谢谢!
问题补充：
我在手机调试 定时器 的时候，分别在 微信 里和 手机默认浏览 器里打开 同一页面，
分别切换到后台，发现微信里的页面定时器任然运行，默认浏览器的中止运行了。
在手机默认浏览器里打印 document.visibilityState 是undefined， 但是网页运行在 微信 里的话就能正常打印。
请问是为什么？ 微信有做什么处理么？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
<ul>
<li v-for="item in items">
<com1 :value="item.time"></com1>
</li>
</ul>
</div>
<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: '<div>距离 {{ value | date("HH:mm:ss") }} 还有 {{ seconds }}s</div>',
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>10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3.1k 阅读✓ 已解决
2 回答2.7k 阅读✓ 已解决
2 回答4.7k 阅读✓ 已解决
4 回答4.3k 阅读✓ 已解决
与手机系统时间进行比较；
如果还不放心，在app 打开的时候与后端的系统时间进行比较。