recherche

Maison  >  Questions et réponses  >  le corps du texte

javascript - problème de compte à rebours webapp js

Maintenant, je rencontre un tel problème : 

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

Je souhaite créer un composant ou une fonction qui puisse résoudre tous les problèmes de compte à rebours sur la page,
mais je suis bloqué sur mon idée. Je me demande si les experts ont de bonnes idées, solutions ou informations ?
Merci !

Question supplémentaire :

  1. Lorsque je déboguais le minuteur de mon téléphone, j'ai ouvert la même page dans WeChat et le navigateur par défaut de mon téléphone,
    basculé respectivement en arrière-plan et j'ai constaté que le minuteur de page dans WeChat était toujours en cours d'exécution et que le navigateur par défaut avait arrêté de courir.

  2. Lors de l'impression dans le navigateur par défaut du téléphone mobile, document.visibilityState n'est pas défini, mais si la page Web est exécutée dans WeChat, elle peut être imprimée normalement.

Excusez-moi pourquoi ? WeChat a-t-il fait quelque chose pour y remédier ?

某草草某草草2744 Il y a quelques jours837

répondre à tous(2)je répondrai

  • 高洛峰

    高洛峰2017-05-19 10:16:09

    Comparez avec l'heure du système téléphonique ;
    Si vous n'êtes toujours pas sûr, comparez avec l'heure du système backend lorsque l'application est ouverte.

    répondre
    0
  • 漂亮男人

    漂亮男人2017-05-19 10:16:09

    <!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>

    répondre
    0
  • Annulerrépondre