Boucle for avec setTimeout

Version imprimable

Bonsoir

Je développe un petit site web en local et j'ai un petit problème :

Dans une balise <canvas>, en avec JQuery, j'affiche un histogramme.

Je l'ai fait sans setTimeout et tout marche très bien 8-)

Afin d'ajouter un effet, je voudrais ajouter setTimeout mais là, plus rien ne s'affiche :weird:

voici mon code js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
  function drawCanvas() {    var bebe = $("#bebe").html();
    var enfant = $("#enfant").html();
    var adulte = $("#adulte").html();
    var agee = $("#agee").html();
 
 
    var bebeText = $("#bebe_image").attr("alt");
    var enfantText = $("#enfant_image").attr("alt");
    var adulteText = $("#adulte_image").attr("alt");
    var ageeText = $("#agee_image").attr("alt");
 
 
    var canvas = document.getElementById("canvas");
    var contex = canvas.getContext("2d");
    contex.textAlign="center";
    contex.font="15px Arial";
 
 
    var dataText = [bebe, enfant, adulte, agee];
 
 
    bebe = bebe.substring(0,bebe.length-1);
    enfant = enfant.substring(0,enfant.length-1);
    adulte = adulte.substring(0,adulte.length-1);
    agee = agee.substring(0,agee.length-1);
 
 
    var dataNumber = [bebe, enfant, adulte, agee];
    var barColor = ['#efac55', '#45b0ca', '#92be6c', '#45b0ca']
    var absText = [bebeText, enfantText, adulteText, ageeText];
 
 
    var barWidth=40;
    var barSpace=100;
    var barUnit=5;
 
 
    var posX = 0;
    var posY = 0;
 
 
    for (var i = 0; i<dataNumber.length; i++){
 
 
      setTimeout(function() {
        barHeight = dataNumber[i] * barUnit;
        posX = i*barSpace + 60 + i*barWidth;
        posY = 400 - barHeight;
        contex.fillStyle = barColor[i];
        contex.fillRect(posX, posY - 30, barWidth, barHeight);
        contex.fillText(dataText[i], posX + 20, posY -40);
        contex.fillStyle = 'black';
        contex.fillText(absText[i], posX +20, 390);
      }, 1000);
 
 
    }
 
 
  }

Si je supprime les lignes 45 et 54, sa marche mais sans l'effet "kiss cool" :D

Les données sont récupérée dans des balises HTML (prévu de mettre dans un tableau)

Merci d'avance pour votre aide.

17/03/2018, 02h45
psychadelic
Oki, explication :
on va juste prendre les lignes
Code:

1 2 3 4 5 6 for (var i = 0; i<dataNumber.length; i++){ setTimeout(function() { barHeight = dataNumber[i] * barUnit; ... }, 1000); }
on est bien d'accord , toutes les fonctions demandées dans ta boucle doivent s'exécuter au bout d'un délai de 1 seconde.
donc,
à l'échelle de l'horloge des microprocesseurs actuels, cela se passera après que la boucle for (var i = 0; i<dataNumber.length; i++){

à la fin de cette boucle la valeur de i sera égale à dataNumber.length

et c'est cette unique valeur finale i = dataNumber.length qui sera utilisée par toutes les fonctions que tu à généré dans ta boucle.

ce qui est équivalent à
Code:

1 2 3 4 5 6 for (var i = 0; i<dataNumber.length; i++){ setTimeout(function() { barHeight = dataNumber[ dataNumber.length ] * barUnit; ... }, 1000); }
tu peux le constater par toi même au travers d'un simple console.log
Code:

1 2 3 4 5 6 7 for (var i = 0; i<dataNumber.length; i++){ setTimeout(function() { console.log(" valeur de i = " + i); barHeight = dataNumber[ i ] * barUnit; ... }, 1000); }
mais rassure toi, il y a différentes solution possibles, certaines dépendent du type et de la version du navigateur utilisé
17/03/2018, 09h36
FCL31

Merci psychadelic

EN fait, la boucle s'en fou de la du setTimeout et n’exécute pas le contenu de ce setTimeout mais fait la boucle quand même.

Toutefois, il affiche le log et effectivement, i est toujours égal à dataNumber.leng dans le setTimeout.

Mais pourquoi le log s'affiche et rien ne s’exécute ??
17/03/2018, 15h38
psychadelic

Citation:

Envoyé par FCL31

Merci psychadelicMais pourquoi le log s'affiche et rien ne s’exécute ??

parce que j'imagine que barHeight = dataNumber[ dataNumber.length ] * barUnit; retourne une valeur indéfinie et que cela affecte tous les calculs suivants, imposant à l'interpréteur un abandon pur et simple de l'exécution de cette fonction...

Citation:

Envoyé par FCL31

EN fait, la boucle s'en fou de la du setTimeout et n’exécute pas le contenu de ce setTimeout mais fait la boucle quand même.

Oui, c'est le principe, la boucle génère N fonctions "privées" qui devront s'éxécuter plus tard dans leur coin, en attendant il continue sa boucle jusqu'a la fin, et donc en faisant varier la valeur de i jusqu'a ce que atteigne sa limite ( dataNumber.length ) et qui restera à cette valeur quand tes fonction privées devront être traitées par l'interpréteur.
17/03/2018, 15h51
Toufik83

bonjour,
est ce que tu es sûr de cette ligne ?

Code:

barHeight = dataNumber[i] * barUnit;

vu que dataNumber est un tableau qui porte des valeurs de type 'string', ce ne sont pas des chiffres.
17/03/2018, 18h55
FCL31

Citation:

Envoyé par psychadelic

Oui, c'est le principe, la boucle génère N fonctions "privées" qui devront s'éxécuter plus tard dans leur coin, en attendant il continue sa boucle jusqu'a la fin, et donc en faisant varier la valeur de i jusqu'a ce que atteigne sa limite ( dataNumber.length ) et qui restera à cette valeur quand tes fonction privées devront être traitées par l'interpréteur.

Une solution (ou au moins une pistes) pour pouvoir contourner ce problème ? STP :?

Citation:

Envoyé par Toufik83

est ce que tu es sûr de cette ligne ?

Code:

barHeight = dataNumber[i] * barUnit;

Normalement, pas de problème avec cette lige. Le code fonctionne sans le setTimeout.

Merci pour vos aide.

Citation:

Envoyé par FCL31

Une solution (ou au moins une pistes) pour pouvoir contourner ce problème ? STP :?

ben tout simplement passer par une vraie fonction !
(et pourquoi vouloir à tout prix multiplier des une fonction identique)

Code:

1
2
3
4
5
6
7
8
9
10
function desinerBidule( noItem ) {
  barHeight = dataNumber[ noItem ] * barUnit;
  posX = noItem * barSpace + 60 + noItem * barWidth;
  posY = 400 - barHeight;
  contex.fillStyle = barColor[ noItem ];
  contex.fillRect(posX, posY - 30, barWidth, barHeight);
  contex.fillText(dataText[ noItem ], posX + 20, posY -40);
  contex.fillStyle = 'black';
  contex.fillText(absText[ noItem ], posX +20, 390);
};

et pour l'appeller :

Code:

1
2
3
for (var i = 0; i<dataNumber.length; i++) {
  setTimeout( desinerBidule, 1000, i);
}

reconnais que t'aime bien te compliquer la vie ! :mouarf:

mais comme mon petit doigt me dit que tu va implémenter ça de travers, je me suis permis de te refaire toute la fonction drawCanvas()

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
function drawCanvas() {
 
  var
    bebe        = $("#bebe").html(),
    enfant      = $("#enfant").html(),
    adulte      = $("#adulte").html(),
    agee        = $("#agee").html(),
    bebeText    = $("#bebe_image").attr("alt"),
    enfantText  = $("#enfant_image").attr("alt"),
    adulteText  = $("#adulte_image").attr("alt"),
    ageeText    = $("#agee_image").attr("alt"),
    canvas      = document.getElementById("canvas"),
    contex      = canvas.getContext("2d")
  ;
 
  contex.textAlign = "center";
  contex.font      = "15px Arial";
 
  var dataText = [bebe, enfant, adulte, agee];
 
  bebe   = bebe.substring(0,bebe.length-1);
  enfant = enfant.substring(0,enfant.length-1);
  adulte = adulte.substring(0,adulte.length-1);
  agee   = agee.substring(0,agee.length-1);
 
  var
    dataNumber = [bebe, enfant, adulte, agee],
    barColor   = ['#efac55', '#45b0ca', '#92be6c', '#45b0ca'],
    absText    = [bebeText, enfantText, adulteText, ageeText],
    barWidth   = 40,
    barSpace   = 100,
    barUnit    = 5
  ;
 
  for (var i = 0; i < dataNumber.length; i++) {
    setTimeout( desinerBidule, (1000 +(i*250)), i);
  })
 
  function desinerBidule( noItem ) {
    var    
      barHeight = dataNumber[ noItem ] * barUnit,
      posX      = noItem * barSpace + 60 + noItem * barWidth,
      posY      = 400 - barHeight
    ;
    contex.fillStyle  = barColor[ noItem ];
 
    contex.fillRect(posX, posY - 30, barWidth, barHeight);
    contex.fillText(dataText[ noItem ], posX + 20, posY -40);
    contex.fillStyle = 'black';
    contex.fillText(absText[ noItem ], posX +20, 390);
  };
 
}; //  drawCanvas()

18/03/2018, 01h50
FCL31

Citation:

Envoyé par psychadelic

reconnais que t'aime bien te compliquer la vie ! :mouarf:

Oui, je kiff me faire chier :aie:

Merci beaucoup.

Vu l'heure, je regarde ça demain.

Bonjour,
tu as plusieurs problèmes en fait.

• Le premier est le délai d'appel de ta fonction.
Lorsque tu fais
Code:

1 2 3 4 5 6 7 var i; var nb = 10; // mise en cache de la valeur de fin for (i = 0; i < nb; i += 1) { setTimeout(function () { console.log(new Date().getTime()); }, i); // le délai est d'appel est 0, 1, 2, 3 etc. }
... observe la console est tu verras que tout s'affiche d'un seul coup, cela est dû au fait que chaque appel s'effectue à valeur de i intervalle.
Ce n'est pas ce que tu veux, donc la première chose à faire est de décaler chaque appel et pour ce faire il te faut écrire
Code:

1 2 3 4 5 6 7 var i; var nb = 10; // mise en cache de la valeur de fin for (i = 0; i < nb; i += 1) { setTimeout(function () { console.log(new Date().getTime()); }, i *250); // le délai d'appel est 0, 250, 500, 750 etc. }
cela correspond plus à ce que tu souhaites.

• Le deuxième souci vient maintenant de ta « variable de boucle », pas mal de discussions abordent le sujet sur ce forum.
La question est que vaut ta variable au moment de l’exécution de la fonction, tu l'auras compris cela ne sera pas ce que tu veux !

Il existe moult façons de régler le problème sachant que la plus pérenne passe par la déclaration d'une « variable de block » via le mot clé let, merci ES6.
Il te suffit donc d'écrire
Code:

1 2 3 4 5 for (let i = 0, nb = 10; i < nb; i += 1) { setTimeout(function () { console.log(i); }, i * 250); }
Je te conseilles quand même de sortir la fonction appelée de la boucle et de faire plutôt un truc dans le style
Code:

1 2 3 4 5 6 7 8 function laFonction(param) { console.log(param); } for (let i = 0, nb = 10; i < nb; i += 1) { setTimeout(function () { laFonction(i); }, i * 250); }
Nota :
Concernant les animations et pour plus de fluidité je te conseilles également de regarder du côté de requestAnimationFrame.

18/03/2018, 12h50
FCL31

Bonjour psychadelic.

Besoin de quelques explication STP :

Citation:

Envoyé par psychadelic

Code:

desinerBidule( noItem )

Que signifie exactement ce "noItem" ??

Citation:

Envoyé par psychadelic

Code:

setTimeout( desinerBidule, 1000, i);

A quoi correspond le 3eme paramètre "i" ??

Après sa fonctionne (Merki) mais que au 1ere appel de la fonction :
Si je fais un nouvelle appel à la fonction "drawCanvas()" depuis un bouton par exemple, le canevas s'affiche direct (On pourrait presque croire que c’est une image en fait)

NoSmoking, c’était pour moi ta réponse ??
18/03/2018, 13h33
psychadelic
Sérieux ?
quand tu déclare une fonction, on peut lui donner des paramètres en entrée, et on doit les placer dans la parenthèse...

ex;
Code:

1 2 3 4 5 6 7 8 fonction additionne ( val_A, val_B) { return (val_A + val_B); } var toto = additionne( 3, 4); console.log(toto); // retourne 7
quand à la méthode setTimeout la syntaxe est faite ainsi :
timeoutID = window.setTimeout(fnct, delai[, param1, param2, ...]);

doc officielle => https://developer.mozilla.org/fr/doc...ers/setTimeout

les paramètres en entrées doivent être placé après la valeur du délai,
et on ne donne que le nom de la fonction qu'on appelle.
18/03/2018, 13h50
psychadelic

Citation:

Envoyé par FCL31

Après sa fonctionne (Merki) mais que au 1ere appel de la fonction :
Si je fais un nouvelle appel à la fonction "drawCanvas()" depuis un bouton par exemple, le canevas s'affiche direct (On pourrait presque croire que c’est une image en fait)

ben, je n'ai qu'une idée tres partielle de ton truc, qui ne laisse aucun moyen de tester.
Qu'est-ce que donnent les messages dans la console ??

sinon oui, tu peux utiliser la méthode de NoSmoking, en remplaçant le for (var i = 0; i<.. par un for (let i=0; i< ... et qui ne peut fonctionner que sous ES6
mais je suis loin d'être certain que tu en comprenne instantanément les rouages...
et les explication de NoSmoking sont plutôt sommaires et éloignées d'un idéal pédagogique :whistle2:
18/03/2018, 14h11
NoSmoking

Citation:

Envoyé par FCL31

NoSmoking, c’était pour moi ta réponse ??

Tout à fait, je ne me permettrait pas de donner des conseils à psychadelic :aie:

Citation:

Envoyé par psychadelic

... les explication de NoSmoking sont plutôt sommaires et éloignées d'un idéal pédagogique :whistle2:

:ptdr: j'ai failli me pisser dessus en lisant cela surtout venant de toi ;)
18/03/2018, 14h31
FCL31

Oui, pour le passage de paramètre, pas de problème. c'est le "noItem" qui me gène.

Mais si je comprend bien, le 3eme paramètre "i" des setTimout correspond au paramètre de desinerBidule.

Citation:

Envoyé par psychadelic

mais je suis loin d'être certain que tu en comprenne instantanément les rouages...

Oui, effectivement, je commence à peine à code en JavaScript :?

Citation:

Envoyé par FCL31

Oui, pour le passage de paramètre, pas de problème. c'est le "noItem" qui me gène.

Mais si je comprend bien, le 3eme paramètre "i" des setTimout correspond au paramètre de desinerBidule.

on lui donne le non qu'on veut, les fonctions appelées n'ont que faire du vrai nom des variables, il leur faut juste un nom en interne.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 var A, B, C, D, machin, truc, bidule; A = 15; B = 88; C = 48984; D = -958; machin = additionne (A, B ); truc = additionne (C, D ); bidule = additionne (C,7897 ); fonction additionne ( ReineDangleterre, PrinceDeGalles) { return (ReineDangleterre + PrinceDeGalles); }
mais vaut mieux éviter de mettre des noms fantaisistes, sinon ton code va devenir un zoo.

Citation:

Envoyé par FCL31

Mais si je comprend bien, le 3eme paramètre "i" des setTimout correspond au paramètre de desinerBidule

Oui, et il prend pour nom noItem à l'intérieur de cette fonction (en réalité il en copie sa valeur de l'instant)

19/03/2018, 01h08
FCL31

Bonsoir

Bon, me semble avoir bien compris, et tout marche comme convenu. Merci beaucoup

Juste un détail :
Mais petite explication de mon utilisation :
Dans une page , j'ai une image avec un bouton dessous.
Quand je clique sur le bouton, je dessin disparaît et mon canvas apparait (magique :D ).
J'utilise .toggle("slow", "swing") pour cela.
Donc, un clic, j'ai mon canvas avec l'effet voulu et un autre clic, je reviens sur mon image.
Jusque la, nikel.
Mais, petit detail qui me dérange un peut (rien de bien grave mais au passage, je pose quand même la question), quand je re-re-clique sue le bouton j'ai mon canvas mais j'ai plus l'effet qu'il devrait y avoir.

J'ai essayé

Code:

contex.clearRect(0, 0, 600, 400);

sur l'event du clic bouton mais rien

Une idée ??

Merci
19/03/2018, 01h23
psychadelic

ton toggle c'est du jQuery non ?

je connais mal , mais à priori cette fonction joue sue l'opacité des objets (?)

quand par la suite tu place ton contex.clearRect(0, 0, 600, 400); tu vire tous les objets présent dans ton rectangle, ce qui fait que le toggle n'a aucun élément pouvant avoir matière à apparaître ou disparaître progressivement..
19/03/2018, 09h28
FCL31

Bonjour

Citation:

Envoyé par psychadelic

ton toggle c'est du jQuery non ?

Oui,c'est du JQuery.

toggle, passe la div de dsiplay : block; si c'est par défaut en display : none; et inversement

Bon, pour le reste, je pense que je vais laisser comme ça