Comment garder le gif animé en cours d'exécution tout en effectuant des calculs intenses
J'ai une page qui fait un peu intense et de longue durée des calculs en Javascript. Je voudrais avoir une animation de chargement pour dire à l'utilisateur des progrès sont réalisés. J'ai un gif animé, mais l'ensemble de la fenêtre du navigateur se bloque (et le gif n'est pas jouer), tandis que le Javascript est en cours d'exécution. Puis quand c'est fait, il dégèle. Les calculs doivent être côté client de sorte qu'ils ne peuvent pas être fait sur un serveur.
Est-il un moyen de garder Javascript à partir de gel de la page et l'arrêt des animations de jouer alors que c'est de faire des calculs?
source d'informationauteur Seth Carnegie
Vous devez vous connecter pour publier un commentaire.
Vous pouvez également utiliser HTML5
webworkers
(Wikipedia) pour exécuter long de l'exécution de scripts en arrière-plan. C'est comme le multi-threading pour javascript.Elle fonctionnera dans les derniers navigateurs sauf IE.
Trouvé un jeu en utilisant les web workers check it out
Vous pourriez diviser le travail en petits morceaux et l'utilisation d'un
setTimeout
à la prochaine itération, une fois la première terminée, de cette façon, le navigateur a une chance de mettre à jour l'interface utilisateur. (c'est parce que le navigateur utilise un seul thread, donc si il est occupé à faire de js, il ne peut faire d'autres choses)Javascript traitement est mono-thread, donc, même si votre code est en cours d'exécution, aucune autre animation code sera exécuté.
Vous aurez besoin pour configurer votre traitement à exécuter dans les lots. Je ne sais pas ce que vous êtes en traitement, mais si vous faites quelque chose qui peut être divisée en place facilement, alors vous pouvez traiter les N premiers éléments, puis utiliser setTimeout à l'annexe de la partie suivante à exécuter en quelques millisecondes. De cette façon, vous donnez le navigateur de temps pour faire d'autres choses qui doit être fait.
Si le navigateur se fige, ce qui signifie que vous sont en train de faire un travail sérieux.
La seule façon de résoudre ce problème est d'ajouter 100ms de sommeil chaque seconde de l'exécution du script. S'il vous plaît regardez javascript
setInterval()
appel.Animations CSS3 généralement continuer à fonctionner même si le JavaScript est bloquant (testé avec Chrome 40.0).
De sorte que vous pouvez utiliser des bibliothèques comme SpinKit ou spin.js de visualiser que le calcul est en cours.
Cependant, veuillez noter la disponibilité des animations CSS3:
caniuse.com
Dissiper les Android CSS animation mythes
Vous n'avez probablement pas besoin de plus, mais juste au cas où quelqu'un d'autre est googler, voici une solution simple:
*notez que cela ne fonctionne que si cet énorme à l'exécution du script est causé par une longue boucle d'itération
-faire à votre boucle de quelque chose comme ceci:
-puis l'appeler comme:
Voici un petit violon sans l'aide de paramètres (il est donc plus facile à comprendre) et avec une fonction pour détecter si le souhaitable script a fini de s'exécuter:
https://jsfiddle.net/or1mrmer/
J'ai répondu avec un fonctionnement exemple (avec un simple indicateur de progrès) ici.
Il utilise le "rendement" et est extrêmement simple à utiliser (et de modifier les JS boucles) lorsque vous voulez tout simplement pour permettre à d'autres processus un timeslice, et c'est le plus simple à configurer que les web workers (que j'ai utilisé), surtout si vous avez déjà une boucle d'interaction avec les variables globales.