J'écris un jeu par navigateur en utilisant HTML, CSS et JavaScript, écrit en Perl. La santé et l'endurance sont enregistrées sur le serveur et j'utilise JavaScript pour montrer à l'utilisateur un décompte mis à jour en direct de ces statistiques lors du chargement de la page en cours. Cette fonctionnalité fonctionne bien, mais si l'utilisateur change d'onglet ou passe à une autre application et laisse le navigateur s'exécuter en arrière-plan, la valeur de comptage que vous voyez lorsque vous revenez ne suit pas correctement. Ainsi, lorsque vous revenez au navigateur, votre compteur peut afficher une endurance de 50/100, alors qu'en réalité votre endurance est de 100/100. Ainsi, lorsque vous faites quelque chose dans le jeu (charger une nouvelle page), le serveur met à jour le compteur à une valeur réelle, car le JavaScript est juste en train de montrer à l'utilisateur une vue de défilement "en direct" dans le navigateur.
Existe-t-il un moyen de garantir que les compteurs JavaScript fonctionnent toujours même si la page/l'onglet est inactif ou n'est pas au premier plan ? À court de réécrire complètement mon jeu pour afficher un flux continu de contenu push du serveur en direct à l'utilisateur dans le navigateur ?
Supposons que vous jouiez à un jeu. Vous verrez votre santé et votre endurance revenir. Vous passez à un autre programme pendant une minute, puis revenez au jeu dans le navigateur. Vous remarquerez que votre santé et votre endurance ne sont pas mises à jour pendant votre absence. Mais lorsque vous effectuez une action dans le jeu, la valeur sera mise à jour à ce qu'elle devrait être car elle est suivie en interne sur le serveur. C'est le problème que je veux résoudre. J'espère que c'est clair !
Je n'ai rien essayé pour résoudre ce problème autre que la recherche en ligne et finalement je n'ai pas trouvé une seule vraiment "bonne" réponse sur ce site, alors j'ai décidé de demander.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Le push continu du serveur ne fonctionne pas non plus. Tout ce qui se passe dans la boucle d'événements principale, comme les minuteries ou les événements qui se produisent lorsque le focus est perdu, sera ralenti par le navigateur pour économiser des ressources. Certains navigateurs mobiles l'arrêtent complètement.
La réponse au problème est de changer la façon dont l'application suit ces statistiques.
Maintenant, certaines personnes diront d'utiliser WebWorkers pour exécuter le minuteur dans un fil de discussion séparé, mais cela ne résout pas tous les problèmes. Vous rencontrerez toujours des problèmes avec différentes versions, par exemple si quelqu'un sort votre page du mode veille ou quelque chose comme ça. Aucune tâche en arrière-plan ne survit.
Vous avez mentionné que vous suivez également ces statistiques sur le serveur. C'est pratique, donc la chose la plus évidente à faire est d'utiliser l'Window Focus Event pour détecter quand une étiquette retrouve le focus. Vous appelleriez ensuite le serveur pour obtenir les dernières statistiques et réinitialiser le minuteur en fonction de ces nouvelles données. Pour éviter que des données obsolètes ne soient affichées pendant qu'une requête est en cours, vous pouvez choisir d'afficher une icône de chargement ou autre chose pendant ce temps.
Une autre façon courante de résoudre ce problème consiste à conserver une variable à chaque fois que la minuterie s'incrémente, qui représente l'horodatage du dernier renvoi des données. Vous pouvez utiliser l'événement
blur事件检测到，并将该最后时间戳存储在某个地方。然后当它们重新获得焦点时，您可以处理focuslorsque vous perdez la concentration et calculer la différence entre l'heure actuelle et la dernière heure enregistrée avant de quitter la concentration (perte de concentration). Vous pouvez recalculer à partir de cette période quelle devrait être la valeur.Mais si votre serveur dispose de ces informations, il serait moins sujet aux erreurs et plus simple de simplement demander au serveur quand le focus est rétabli.