[DOM] Modification du DOM non visible lors d'un setInterval

:salut:

J'ai une variable qui évolue dans le temps, lors d'un traitement lourd, et j'aimerai observer son contenu régulièrement...

J'ai codé le script suivant, mais j'ai un problème: mon champ texte (ou alors le innerHTML d'un div, peut importe) ne se met à jour qu'à la toute fin du traitement, ce qui ne répond pas vraiment au besoin initial :roll:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <html> <body> <script type="text/javascript"> function go() { var value = 0; var content = document.getElementById('content'); setInterval(function() { content.value = value; }, 10); for(var i = 0 ; i <= 1000000 ; ++i) { Math.log(i)/Math.log(10); value = i; } } </script> <input type="button" onclick="go()" value="Start:"/><input type="text" id="content" value="" /> </body> </html>
Est-ce que quelqu'un ici pourrait me dire ce qui ne va pas dans mon code ? Merci d'avance :ave:

http://img218.imageshack.us/img218/8486/21fi6.gif

Bonjour,
problème de portée de variables (locale, en l'occurence)

Code:

setInterval("document.getElementById('content') ='" + value +"'", 10);

EDIT : il faut que "value" (mauvais nom pour une variable, d'ailleurs) soit évaluée à la constitution de l'instruction, et non à l'exécution (il n'aura alors plus la valeur attendue)

A+

heu à la lecture de ton code je ne comprends pas le "besoin initial" ...

d'un coté tu mets une valeur dans l'objet ..
Code:

1 2 3 setInterval(function() { content.value = value; }, 10);
de l'autre là tu ne fais rien :
Code:

1 2 3 4 for(var i = 0 ; i <= 1000000 ; ++i) { Math.log(i)/Math.log(10); value = i; }
enfin c'est juste une boucle indépendante du setInterval ...

en plus appeler une variable value ... :rolleyes:

Quel est le but recherché ?
afficher un comptuer de 0 à 100000 dans un input ?

Citation:

Envoyé par E.Bzz

Bonjour,
problème de portée de variables (locale, en l'occurence)

Code:

setInterval("document.getElementById('content') ='" + value +"'", 10);

Désolé:
1. je ne vois pas le problème de portée dans mon code.
2. la suggestion proposée ne fonctionne pas mieux (c'est meme pire) et c'est normal car on perd dans ce cas l'aspect "dynamique"...

Si tu testes mon code, à la fin de mon traitement il indique 1000000 alors qu'avec le code proposé, il indique 0 (pas bon)...

Citation:

Envoyé par SpaceFrog

heu à la lecture de ton code je ne comprends pas le "besoin initial" ...

J'ai un traitement assez long (d'où l'instruction qui ne fait rien mais qui bouffe un peu de perfs pour faire mes tests)
J'aimerais pouvoir observer en direct live une variable qui évolue pendant ce traitement.
Citation:
Envoyé par SpaceFrog
d'un coté tu mets une valeur dans l'objet ..
Code:

1 2 3 setInterval(function() { content.value = value; }, 10);
La callback a juste pour rôle de mettre à jour mon champ texte. Et ce toutes les 10, 250 ou 1024 millisecondes.
Citation:
Envoyé par SpaceFrog
de l'autre là tu ne fais rien :
Code:

1 2 3 4 for(var i = 0 ; i <= 1000000 ; ++i) { Math.log(i)/Math.log(10); value = i; }
Si je fait quelque chose d'important:
- je bouffe des ressources
- je mets à jour ma variable

Citation:

Envoyé par SpaceFrog

en plus appeler une variable value ... :rolleyes:

Si ça peut vous faire plaisir :D
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <html> <body> <script type="text/javascript"> function go() { var toto = 0; var content = document.getElementById('content'); setInterval(function() { content.value = toto; }, 10); for(var i = 0 ; i <= 1000000 ; ++i) { Math.log(i)/Math.log(10); toto = i; } } </script> <input type="button" onclick="go()" value="Start:"/><input type="text" id="content" value="" /> </body> </html>

Citation:

Envoyé par Mr N.

Désolé:
1. je ne vois pas le problème de portée dans mon code.

Je suppose que c'est l'essentiel :roll:

Bon courage ...

"Je suppose..." :roll:
Est-ce que tu joues aux devinettes ou est-ce que tu ne sais pas si il y a effectivement un problème de portée ?

Salut,

Non, il n'y a pas de problème de portée de variable, il y a une jolie closure tout a fait légale.

le problème vient du fait que javascript n'est pas multithread, il n'exécute pas des fonctions en parallèle quand bien même elle serait définie en interne d'une autre.

Le premier appel à la fonction anonyme définie dans setInterval se fera a la fin de l'exécution de la fonction principale.

Je pense qu'il faut réarchitecturer ton code pour fragmenter le traitement. Qqch dans le genre
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 var pos; function go() { pos = 0; traitement(); } function traitement() { var fin = pos + 100; for(var i = pos ; i < fin; ++i) { Math.log(i)/Math.log(10); } pos = fin; document.getElementById('content').innerHTML = pos; if(pos<10000) setTimeout(traitement, 10); }

Merci Marcha pour ta suggestion. Et de confirmer au passage qu'il n'y a pas de problème de portée, je commençais à me poser des question :D

J'ai bien pensé au setTimeout, mais le soucis est qu'il va introduire un délai dans mon traitement et le ralentir... Tu confirmes ? Je préfère mettre la priorité sur les perfs du traitement que de le ralentir pouir un simple affichage. Ce dernier n'étant qu'un "bonus"... Bonus qui ne fera qu'agrémenter l'interface utilisateur.

Citation:

Le premier appel à la fonction anonyme définie dans setInterval se fera à la fin de l'execution de la fonction principale

Intéressant... et si je lancait mon traitement via un setTimeout et mon observation via un setInterval, est-ce que ça pourrait regler le problème ?

Citation:

Envoyé par Mr N.

et si je lancait mon traitement via un setTimeout et mon observation via un setInterval, est-ce que ça pourrait regler le problème ?

La réponse est non :cry:

Citation:

Envoyé par Mr N.

J'ai bien pensé au setTimeout, mais le soucis est qu'il va introduire un délai dans mon traitement et le ralentir... Tu confirmes ?

Oui, mais négligeable à mon sens, tu peux afficher ta progression toutes les secondes et tu perds qq ms par secondes. donc moins de 1%, à toi de voir.

Code:

1 2 3 4 5 6 7 8 9 10 11 12 function go() { var value = 0; var content = document.getElementById('content'); for(var i = 0 ; i <= 1000 ; ++i) { Math.log(i)/Math.log(10); setTimeout(function(nb) { return function() { content.value = nb } }(i),10*i); } }
Ceci mets simplement le div à jour, par contre si tu veux observer la mise à jour lors d'un traitement lourd, cela va être difficile, du fait que javascript executera ta boucle en entier avant d'executer le code en dessous, donc l'affichage va bloquer.