简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - webapp js countdown problem
某草草
某草草 2017-05-19 10:14:09
0
2
803

Now I have such a problem: 

对于webapp 有一个活动列表，列表里每个活动有一个倒计时，
一旦把app切入后台，js 计时器就不在生效了，导致倒计时不准确，
有想过解决方法，监听visibilitychange事件，观察document.visibilityState

I want to make a component or function that can solve all the countdown problems on the page,
but my idea is stuck. I wonder if the experts have any good ideas, solutions, or information?
Thanks!

Question supplement:

  1. When I was debugging the timer on my mobile phone, I opened the same page in WeChat and the default browser of the mobile phone,
    switched to the background respectively, and found that the page timer in WeChat was still running, and the default browser was The server has stopped running.

  2. When printing in the default browser of the mobile phone, document.visibilityState is undefined, but if the webpage is run in WeChat, it can be printed normally.

Excuse me why? Has WeChat done anything to deal with it?

某草草
某草草

reply all(2)
小葫芦
小葫芦2017-05-19 10:16:09 2 floor

Compare with the system time of the mobile phone;
If you are still unsure, compare with the system time of the backend when the app is opened.

Like +0
Add Reply
漂亮男人
漂亮男人2017-05-19 10:16:09 1 floor 
<!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>
Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！