Discussion :

[dré kam]

Salut à tous!
Je fais un jeu en JavaScript où les images doivent souvent être remplacés par d'autres. J'ai un problème à ce niveau:

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
 
function show()
{
	clicks++;
	this.src = this.hidde.src;
	if(clicks % 2 == 0)
	{
		alert("to");
		if(last.src != this.src) 
		{
			pause(500);
			last.src = "image/default.jpg";
			this.src = "image/default.jpg";
		}
		else
		{
			this.onclick = function (){
					return false;
					}
		}
	}

En gros l'image (this) doit être remplacée par une autre (hidde.src) mais le problème c'est que ce remplacement ne se fait qu'une fois sur deux, seulement quand le if qui suit n'est pas exécuté.
Par contre quand je fais le "alert", elle est bien modifiée. C'est comme si la page n'était pas actualisée à temps.
Quelqu'un a t-il une solution? Merci d'avance.

[NoSmoking]

Bonsoir,
il manquerait 2 infos
- comment est appelée la fonction show (la function show bien sûr, j'ai honte!!! ).
- qu'y a t-il dans la fonction pause.

Il semblerait qu'il y ait du setInterval ou setTimeout dans l'air.

[dré kam]

Alors la fonction show() est appelée à chaque fois qu'on clique sur une image :

Code :

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

1
2
 
allCell[i].onclick=show;    //avec i qui parcourt le tableau allCell

La fonction pause() contient un boucle (assez bancale, je le reconnais) qui permet de mettre le programme en pause. Le but est d'afficher l'image pendant quelques secondes.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function pause(duree)
{
 
var date_debut = new Date();
var actdate = new Date();
 
	while (actdate.getTime() - date_debut.getTime() <= duree)
	{
	actdate = new Date();
	}
 
}

Du coup je ne pense que setInterval ou setTimeout feraient l'affaire vu que la fonction ne doit pas être répétée à un intervalle régulier, mais après un clic sur une image.

[NoSmoking]

j'ai un peu de mal à comprendre la finalité de la chose et notamment le if(clicks % 2 == 0).

Lors d'un nombre de clic pair, tu réaffectes la src de ton IMG avec this.src="image/default.jpg";, alors que juste avant tu lui as affecté this.hidde.src.

[dré kam]

Oui mais il y a un autre if juste après:

Code :

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

1
2
 
	if(last.src != this.src)

Pas de chagement si la condition n'est pas vérifiée, sinon on affiche une image pendant une demi-seconde avant de la changer.

[NoSmoking]

ton deuxième if est imbriqué dans le premier if(clicks % 2 == 0), donc tu ne feras ce test qu'un fois sur deux.

[dré kam]

Oui c'est normal. Je dois tester seulement s'il clique deux fois vu que je dois comparer les deux images cliquées.

[NoSmoking]

...Je dois tester seulement s'il clique deux fois vu que je dois comparer les deux images cliquées.

le soleil se lève

il faut donc que tu supprimes ta fonction pause pour la remplacer par un appel à une fonction déportée que tu exécuteras après un certains, c'est typiquement setTimeout.

Effectivement, pour faire simple, le moteur de rendu n'est pas prioritaire sur le script et celui ci mais à jour ce qui doit l'être quand on lui en laisse l'opportunité.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
if (last.src != this.src) {
  // pause(500); SUPPRIME
  var oImg = this; // stoque l'image cliquée car problème de scope
  setTimeout( function(){
      last.src = "image/default.jpg";
      oImg.src = "image/default.jpg";
    }, 1000);
}
else {
  this.onclick = function () {
    return false;
  }
}

on passe par une fonction anonyme et on appelle à l'intérieur de celle ci non pas this, qui ne correspondra plus au this de la fonction show au moment de son exécution, mais à oImg qui as servi à mémoriser ce fameux this.

[dré kam]

J'ai finalement résolu le problème en divisant ma fonction en deux: une qui affiche et une autre qui fait la comparaison des images. Mais je tiens quand même à comprendre ce qui n'allait pas.
-D'abord dans le code que j'ai posté j'ai constaté que les changements d'images tout comme les autres modifications du HTML ne prennent effet qu'à la fin de la fonction qui les fait (d'où l'idée de faire une deuxième fonction). C'est toujours le cas?
-Dans ton code, en utilsant setTimeout la fonction anonyme sera rappelée chaque seconde n'est-ce pas? Si oui ça n'aurait pas été très pratique. De plus il y avait des instructions après le else. Est-ce qu'elles seraient exécutées?

[NoSmoking]

-D'abord dans le code que j'ai posté j'ai constaté que les changements d'images tout comme les autres modifications du HTML ne prennent effet qu'à la fin de la fonction qui les fait (d'où l'idée de faire une deuxième fonction). C'est toujours le cas?

comme indiqué plus haut

...pour faire simple, le moteur de rendu n'est pas prioritaire sur le script et celui ci mais à jour ce qui doit l'être quand on lui en laisse l'opportunité.

-Dans ton code, en utilsant setTimeout la fonction anonyme sera rappelée chaque seconde n'est-ce pas?

NON une seule fois et au bout d'un délai, approximatif de 1s, contrairement à setInterval que l'on appelle une fois et qui se répète à délai intervalle.

De plus il y avait des instructions après le else. Est-ce qu'elles seraient exécutées?

OUI et avant la fonction anonyme mise dans le setTimeout.

Il te suffit d'essayer pour te rendre compte!

[dré kam]

Merci le problème est réglé alors!