setTimeout et son callback
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:
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 ?
