javascript - masalah undur webapp js
某草草
某草草 2017-05-19 10:14:09
0
2
862

Kini saya menghadapi masalah seperti ini:

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

Saya ingin membuat komponen atau fungsi yang boleh menyelesaikan semua masalah kira detik pada halaman,
tetapi saya terperangkap pada idea saya, saya tertanya-tanya sama ada pakar mempunyai idea, penyelesaian atau maklumat yang bagus?
Terima kasih!


Soalan tambahan:

  1. Semasa saya menyahpepijat pemasa pada telefon saya, saya membuka halaman yang sama dalam WeChat dan penyemak imbas lalai telefon saya,
    bertukar ke latar belakang masing-masing dan mendapati pemasa halaman dalam WeChat masih berjalan dan penyemak imbas lalai telah berhenti berlari.

  2. Apabila mencetak dalam penyemak imbas lalai telefon mudah alih, document.visibilityState tidak ditentukan, tetapi jika halaman web dijalankan dalam WeChat, ia boleh dicetak seperti biasa.

Maaf kenapa? Adakah WeChat melakukan apa-apa untuk menanganinya?

某草草
某草草

membalas semua(2)
小葫芦

Bandingkan dengan masa sistem telefon
Jika anda masih tidak pasti, bandingkan dengan masa sistem hujung belakang apabila apl dibuka.

漂亮男人
<!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>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan