Page ne se mettant pas à jour pendant le code javascript occupé

Question

J'ai un script javascript assez long. Le problème est que dans le milieu je veux changer innerHtml d'une div pour dire "presque fait s'il vous plaît attendre". Je pense que le problème est que j'appelle une fonction jquery. Le dans le rappel de succès de la fonction j'appelle une autre fonction qui est où j'essaye de mettre à jour la page.

Si je définis un point d'arrêt en utilisant firebug et que je parcours le code, la page se met à jour et je vois le message de div. Mais si je laisse juste courir le code, je ne vois pas le message. Si je mets une boîte d'alerte avant et après la mise à jour de la div, je la vois aussi.

Quelqu'un a vu quelque chose comme ça avant?

Merci!

Answer 1

Généralement, lorsque le code JS est en cours d'exécution, tout autre rendu est arrêté, tout comme ce que vous voyez. Vous pouvez essayer d'utiliser la fonction setTimeout pour permettre le rendu de se produire sur votre page comme ceci:

doStuff(); 
$('#myDiv').html('Almost done, please wait'); 
setTimeout(doMoreStuff, 50); 

Notez que doMoreStuff est une autre fonction qui fera la dernière partie de votre traitement.

Si votre code peut être divisé de cette façon, cela permettra au navigateur d'entrer dans certains cycles de rendu. Vous pourriez vouloir expérimenter avec le délai (50 ci-dessus) pour trouver un nombre qui fonctionne pour vous, mais si tout ce que vous voulez faire est de définir le contenu d'un div alors 50 devrait être ok (peut-être même 0 va fonctionner).

Aussi, je ne peux pas vous rappeler la syntaxe jQuery pour la mise en innerHTML mais je pense que le point obtient à travers :)