setTimeout et son callback

**Nelswho** · 05/03/2013, 18h06

Bonsoir Developpez.net Section JS !,

J'aimerais terminer une petite fonction pour afficher lettre par lettre un mot que je lui donne, dans un paragraphe de mon DOM.

Voici le code du <body> :

Code html :

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
20
21
 
<body>
	<div><p></p></div>
 
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script type="text/javascript">
                $(function() {
                        function displayWord(word, p) {
                                var time = 0;
                                for (i=0; i<word.length; i++)
                                {
                                        time = time + 50;
                                        setTimeout(function() { p.append(word.charAt(i)); }, time);
                                }
                        }
 
                        var p = $('p');
                        displayWord('word', p);
                });
        </script>
</body>

Vous vous rendrez compte qu'il y a un problème, c'est que mes callbacks sont executés après que la boucle ait été parcourue 4 fois (pour le mot "word"), et donc les 4 callbacks function() du setTimeout essayent d'afficher la lettre située a l'index 4 de la chaine de caractère "word". Mon but serait donc de "figer" la valeur de ma variable i au moment ou je déclare le callback, ou de le transformer en constante, ou quelque chose d'autre, et étant débutant en javascript je ne sais pas comment faire...

Quelqu'un peut m'éclairer ?

**Watilin** · 05/03/2013, 18h40

Ton problème est un problème de portée. Lorsque tu créées tous tes timeouts dans ta boucle for, tu définis en fait un certain nombre de fonctions qui seront appelées plus tard. À la fin de ta boucle, tes variables se trouvent dans leur état de fin de boucle (dans ton exemple i = 4), et toutes les fonctions qui ont été planifiées utiliseront ces valeurs.

Pour enchaîner les timeouts, il est plus courant de définir une fonction à l'avance, qui s'auto-rappellera autant de fois qu'elle aura besoin.

Exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
function displayChar(word, p, i) {
   if (i < word.length) {
      p.append(word.charAt(i));
      setTimeout(function() { displayChar(word, p, i+1); }, 50);
   }
}
 
function displayWord(word, p) {
   displayChar(word, p, 0);
}

**Nelswho** · 05/03/2013, 19h47

Merci Watilin, C'est plus clair et plus léger en plus !

setTimeout et son callback

JavaScript

Discussions similaires

Partager

Partager