Discussion :

[maestro982]

Salut à tous!
bon j'irai droit au but! Voici ce code qui affiche les éléments de mon tableau les uns après les autres avec setInterval, ça fonctionne, mais j'aimerais dans le cadre d'un pur entrainement de debutant, l'écrire autrement en lisant le tableau par une boucle for...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
var tableau = ['Thierry','Linda','Carole', 'Sofiane'];
var i=0;
function Ligne(){
	if(i < tableau.length){
		document.getElementById('textDiv').innerHTML += tableau[i]+ '<br/>';
		i++;	
	}
	else{
		clearInterval(Ligne);
	}
}
setInterval(Ligne, 1000);

Donc voici ou je veux en venir à peu près

Code :

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

1
2
3
4
5
6
7
8
9
10
11
var tableau = ['Thierry','Nicolas','Linda','Carole'];
var i=0;
function lance(){
	for(var i = 0; c = tableau.length, i < c;i++){
		function affich(){
			document.getElementById('textDiv').innerHTML += tableau[i]+ '<br/>';
		}
	}
	setInterval(affich,2000);
}
lance();

Mais là ça m'affiche un "undefined" toutes les deux secondes à la suite! Soit j'ai pris une mauvaise direction depuis le début, soit j'ai la solution sous les yeux mais je bloque là!
Si vous aviez une petite idée svp! Merci d'avance !!!

[devyan]

Bonjour,

C'est un problème de "scope", ta fonction n'est pas visible à l'endroit où elle est appelée.

Comme la fonction est déclarée dans la boucle for elle n'est pas visible en dehors.

[SpaceFrog]

Code :

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

1
2
3
4
5
for(var i = 0; c = tableau.length, i < c;i++){
		function affich(){
			document.getElementById('textDiv').innerHTML += tableau[i]+ '<br/>';
		}
	}

tu déclares une fonction dans une boucle ?????

[kaari kosaku]

Salut, Devyan a (comme toujours ;P) parfaitement raison.

J'ajouterais que ta façon d'ajouter tes nouvelles entrées n'est pas très ergonomique si je puis dire.
Perso lorsque je dois faire de la manipulation de dom j'évite au maximum innerHtml, de plus pour faire de tels ajouts je te conseillerais plutôt de créer des nouveaux éléments dans ton dom (que ce soit des <li>, <div>, <span>...), regarde du côté de htmlElement#appendChild().

Sinon, à propos de ta boucle 'for', je crois que tu as un problème avec le comportement asynchrone de javascript, je m'explique.

Voici ce que fait ta fonction Lance() :
Elle déclare une fonction affich() qui ajoute Thierry, comme cette fonction est déclarée dans ta boucle for la portée de cette fonction est cantonnée à cette boucle for, c'est à dire qu'elle n'est pas déclarée à l’extérieur.
La première itération se termine, tu peux donc considérer que la fonction affich() n'est plus accessible.
2ème itération de la boucle, elle déclare une fonction affich() qui ajoute Linda....

... et ceci 4 fois.
Une fois la boucle for terminée, elle appelle la fonction setIntervall() qui prend affich en paramètre. affich n'existe pas, donc elle te renvoie une erreur.
Mais pour continuer dans le raisonnement, imagine que cette fonction affich soit accessible à l'appel de setIntervall(), qu'est-ce que cette fonction va ajouter à ta zone de texte ? Thierry, Linda ? Et bien ce sera Carole, et tu aura 4 fois affiché Carole sur ton écran.

Une boucle for a un fonctionnement synchrone, ton processeur va lire la première ligne, puis la 2ème etc etc... ensuite il va recommencer ça pour la 2ème itération de la boucle, jusqu'à ce que la condition de fin soit vraie.
setInterval a un comportement asynchrone, c'est à dire que tu demande à la fonction "Tu vas faire ça, et quand ce sera fini, tu exécutera cette fonction", en l’occurrence cette fonction à appeler s'appelle une fonction de callback, et dans ton premier extrait de code, il s'agit de Ligne().

Tu pourrais réaliser un timer synchrone du type : for(var i...) {attendre 2secondes; ajouter tableau[i];}.
Mais tu ne veux pas ça, parce que étant donné que c'est synchrone, pendant que tu attends 2 secondes, ton processeur ne fait plus rien, il attend les 2 secondes pour passer à la suite, en l’occurrence, ajouter un élément à ta zone de texte. En gros si pendant ce temps là tu appuie sur un bouton qui exécute un code js, genre onclick="truc()", cette fonction ne sera appelée qu'une fois que ta boucle for sera terminée, c'est à dire 8 secondes plus tard.

[maestro982]

Bien bien bien!!!
Alors merci de m'avoir répondu et en grande largeur (kaari )
Bon j'en suis au debut je voulais juste m'entraîner et glisser un setInterval pour rendre mes essais plus marrants! Donc oui Space Frog, en l'etat actuel de mes connaissances, je peux mettre une boucle un peu partout!
Mais ça tombe bien, je commençais doucement le chapitre sur la manip du DOM je croiserai forcément ce "htmlElement#appendChild()." Merci pour la précision de la réponse en tout cas!

[Watilin]

C'est un problème de "scope", ta fonction n'est pas visible à l'endroit où elle est appelée.

Comme la fonction est déclarée dans la boucle for elle n'est pas visible en dehors.

Devyan a (comme toujours ;P) parfaitement raison.

Pas toujours apparemment En JavaScript les boucles for ne modifient pas le scope.
Voir (ou revoir) Trois fondamentaux de JavaScript.

Regarde du côté de htmlElement#appendChild().

Je ne veux pas avoir l'air de faire une attaque personnelle, mais le site w3schools a été décrié pour son manque d'exactitude. Le MDN est une bien meilleure source, même si on ne trouve pas toujours les docs en français.

---

Pour revenir au sujet, je vais aller dans le sens de ce qui a été dit : la boucle for suit le fil d'exécution principal de JavaScript, alors que les setInterval et setTimeout sont « notés » pour une exécution ultérieure. Quand un timer est enregistré, le code en cours continue immédiatement son exécution et les timers sont exécutés au plus tôt au moment où ils ont été prévus, à condition que le fil d'exécution ne soit pas occupé à ce moment. Si le fil est occupé, le timer est repoussé jusqu'à ce que le fil soit libéré.

John Resig a expliqué en détails le fonctionnement des timers en JavaScript (c'est en anglais).

Voici une autre façon de faire :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
var tableau = ['Thierry', 'Nicolas', 'Linda', 'Carole'];
 
function affichePlusTard(index) {
   setTimeout(function() {
      var $p = document.createElement('p');
      $p.appendChild(document.createTextNode(tableau[index]));
      document.getElementById('textDiv').appendChild($p);
   }, index * 1000);
};
for (var i = 0, c = tableau.length; i < c; i++) {
   affichePlusTard(i);
}

Ici, la boucle for appelle 4 fois de suite affichePlusTard qui, comme son nom l'indique, n'affiche pas tout de suite le texte. Au lieu de ça elle lance un timer. À la sortie de la boucle for, 4 timers ont été lancés, chacun avec une durée différente : le premier à 1000 ms, le second à 2000 ms, etc.

[devyan]

C'est sûr,
je n'ai pas toujours raison (loin de là)
D'ailleurs, j'apprends plein de choses en venant ici lire les sujets et aider quand je peux.


Je suis d'accord, il est toujours bon de croiser les informations pour les vérifier.