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

**Mr N.** · 31/10/2007, 15h52

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**E.Bzz** · 31/10/2007, 16h07

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

            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+

**SpaceFrog** · 31/10/2007, 16h09

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
  setInterval(function() {
                    content.value = value;
            }, 10);

de l'autre là tu ne fais rien :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**Mr N.** · 31/10/2007, 16h42

Envoyé par E.Bzz

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

            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)...

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.

Envoyé par SpaceFrog

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

Envoyé par SpaceFrog

de l'autre là tu ne fais rien :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Envoyé par SpaceFrog

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

Si ça peut vous faire plaisir

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**E.Bzz** · 31/10/2007, 17h10

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

Bon courage ...

**Mr N.** · 31/10/2007, 17h35

"Je suppose..."

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 ?

**marcha** · 01/11/2007, 15h59

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
}

**Mr N.** · 01/11/2007, 20h45

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

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.

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 ?

**Mr N.** · 01/11/2007, 21h22

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

**marcha** · 02/11/2007, 14h17

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.

**Shinuza** · 02/11/2007, 15h36

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

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

JavaScript

Discussions similaires

Partager

Partager