Discussion :

[FCL31]

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

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

voici mon code js :

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
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"

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.

[psychadelic]

Oki, explication :
on va juste prendre les lignes

Code JavaScript :

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

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 JavaScript :

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

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 JavaScript :

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

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é

[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 ??

[psychadelic]

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

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.

[Toufik83]

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

Code :

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

barHeight = dataNumber[i] * barUnit;

vu que dataNumber est un tableau qui porte des valeurs de type 'string', ce ne sont pas des chiffres.

[FCL31]

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

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

Code :

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

barHeight = dataNumber[i] * barUnit;

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

Merci pour vos aide.

[psychadelic]

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 JavaScript :

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

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 JavaScript :

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

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

reconnais que t'aime bien te compliquer la vie !

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 JavaScript :

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

[FCL31]

reconnais que t'aime bien te compliquer la vie !

Oui, je kiff me faire chier

Merci beaucoup.

Vu l'heure, je regarde ça demain.

[NoSmoking]

Bonjour,
tu as plusieurs problèmes en fait.

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

Code :

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

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 :

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

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 :

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

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 :

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

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.

[FCL31]

Bonjour psychadelic.

Besoin de quelques explication STP :

Code :

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

desinerBidule( noItem )

Que signifie exactement ce "noItem" ??

Code :

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

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 ??

[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 JavaScript :

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

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.

[psychadelic]

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

[NoSmoking]

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

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

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

j'ai failli me pisser dessus en lisant cela surtout venant de toi

[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​.

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

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

[psychadelic]

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 :

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

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.

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)

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

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

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

sur l'event du clic bouton mais rien

Une idée ??

Merci

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

[FCL31]

Bonjour

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