J'ai une boucle qui devrait mettre à jour une barre de progression comme boucle Des incréments, cependant, il ne fait que colorer la barre de progression en une fois après la fin de la boucle. Je me souviens d'avoir un problème similaire, si j'ai utilisé des déclarations d'alerte, la coloration fonctionnerait, alors je pense que cela a à voir avec la concurrence des threads. Pour résoudre mon ancien problème, j'ai utilisé Settimeout. Cependant, cela n'obtient toujours pas à ma barre de progression colorée en temps réel.
Voici ce que je fais: P>
for (var i = 0; i < numOfRows; i++) {
setTimeout('ColourBlock(' + i + ')', 0);
// do_work
}
function ColourBlock (position){
document.getElementById("block" + position).style.backgroundColor = "orange";
}
4 Réponses :
Il ne s'agit pas de threads. Il s'agit du fait que lorsque le code apporte une séquence rapide de modifications DOM ou de style, le navigateur ne tente pas de mettre à jour la vue entre chacun. Au lieu de cela, il attend que les choses se calmentent puis repeignent.
Si vous avez codé une séquence à mesure que vous décrivez avec une valeur de délai d'attente non nulle (disons, 100 millisecondes) pour chaque changement, vous le verriez. Comme vous l'avez écrit, avec un délai d'attente zéro millisecond, toutes les mises à jour vont se passer dans une très courte période - probablement bien sous une milliseconde, à moins que vous ne reçoivent des milliers de ces blocs.
(Notez que votre exemple de code ne donnerait pas 100 comme le délai d'attente à chaque changement; vous devriez les mettre progressivement plus loin dans le futur, en ajoutant 100 autres pour chacun. Ou vous pouvez utiliser un minuteur d'intervalle et annuler après la dernière mise à jour.)
Cela n'a rien à voir avec des changements rapides ou de l'optimisation et tout de faire avec le fait que le code JavaScript et l'interface utilisateur exécutent sur le même fil; Par conséquent, UI ne peut pas être mis à jour pendant que JS code exécute. Un délai d'attente croissant ne vous aidera pas non plus que si vous ne l'augmentez pas au-delà de l'heure d'exécution de la fonction, à quel point vous êtes déjà terminé et n'avez plus besoin de barres de progression.
@LUC augmente le délai d'attente aidera certainement. L'utilisation d'une valeur temporelle de zéro pour tous ceux-ci entraînera les événements de la minuterie à tous les incendies après la fin de la boucle d'événement. Une valeur de délai d'attente plus grande permettra définitivement le temps du navigateur d'actualiser la vue. Comme vous pouvez le constater dans Cet exemple de jsfiddle , même un délai de 1 milliseconde permettra d'animation visible.
Merci pour cela, vous êtes correct. Cependant, le problème est que je dois maintenant "hacer" quel temps devrait être, lorsque cela est censé informer un client de la durée de la durée du processus. Je pourrais forcer ma barre de progression à prendre 10 secondes complétant et le processus peut avoir terminé après 4 secondes: s
Dans votre exemple Jsfiddle, vous utilisez seinterval. Chaque fois que la fonction de seinterval termine l'exécution, l'interface utilisateur prend la relève et met à jour elle-même. Si vous planifiez votre intervalle à 0, l'exemple fonctionne toujours montrant qu'il n'a rien à voir avec permettant au navigateur le temps de mettre à jour. Mises à jour du navigateur Lorsque le code JS termine l'exécution.
Eh bien, comment obtenez-vous les informations sur les "progrès" réels du monde réel en premier lieu?
@LUC Vous noterez que dans la question initiale, "Settimeout ()" a été mentionné. Cela fonctionnera aussi. Nous disons tous les deux la même chose; Je sais comment fonctionne les navigateurs :-)
Les navigateurs ne mettront pas à jour l'interface utilisateur lors de l'exécution du code JavaScript. Lorsque les finitions de code et le contrôle sont renvoyés à l'interface utilisateur, les mises à jour se produiront tous à la fois.
C'est aussi la raison pour laquelle il a fonctionné avec des alertes - lorsque l'alerte est apparue, l'exécution JavaScript a été suspendue et le contrôle a été renvoyé à l'interface utilisateur.
Essayez d'augmenter le temps de votre période de sécurité. Lorsque j'ai eu un problème similaire, nous avons utilisé une lacune de 200 milli secondes et cela a fonctionné.
Vous aurez besoin d'utiliser une fermeture de sorte que lorsque vous appelez colourblock utilise la valeur de i quand il a été appelé (lequel dans le code ci-dessous est attribué à < Code> CourantPosition ). Essayez de changer votre pour en boucle à quelque chose comme: