[setTimeOut] Multiples retardateurs

**speedev** · 27/07/2006, 10h32

Salut!

Voici ce que je développe:
J'ai une page php qui fait un listing des images se trouvant dans un dossier, génère les miniatures et les affichent dans un tpl (smarty) avec une propriété CSS opacity à 50% on va dire, donc chaque miniature est opaque. (IE comme FF)

Comme j'affiche les miniatures avec une boucle, chaque "<img src=...>" dispose de son propre id (que j'incrémente pour qu'ils soient différents biensur) et de ses fonctions dont ces deux-là:
onMouseOver="javascript:visible(this.id)"; onMouseOver="javascript:invisible(this.id")";

Donc le but étant qu'à chaque passage de souris sur une miniature, celle-ci passe "en claire" progressivement suivant une vitesse spécifiée dans les deux fonctions. Pour que la miniature s'affiche progressivement j'utilise un setTimeOut dans visible() qui pointe vers visible() elle même en lui passant l'id de l'image en cours.
De même qu'à chaque sortie de souris, l'image revient à son état initial, opaque par un setTimeOut() dans invisible().

Ce qui marche: affichage progressif des images sur onMouseOver. Effet design huhu!
Ce qui ne marche pas:
retour à la normale sur onMouseOut pendant l'execution (encore en cours) du timer de visible().

Pourquoi :
Un timer est lancé sur le onMouseOver pour faire apparaitre l'image progressivement, mais si j'exécute le onMouseOut avant que ce timer ne soit terminé, l'image se met à clignoter, elle se bloque quoi. Par contre si j'attends que l'image soit complètement claire (donc que le timer soit terminé) et que j'exécute le onMouseOut, cela marche parfaitement, l'image revient bien a la normale sans erreur.

Question : Comment tuer le timer appartenant à une fonction appelée par un événement (onMouseOver ici) depuis un autre événement (onMouseOut)? En principe les variables locales ne sont pas accessibles depuis une autre fonction? Vous avez une solution?

Merci
L'id

**speedev** · 27/07/2006, 10h58

Bon j'ai peut-être une solution mais faudrait m'aider là.

Ce qu'il faut que j'arrive à faire, c'est de créer un timer par image de manière à ce qu'il n'y ait aucun conflit de timer...

Cela dit, comment créer un timer différent dans une seule fonction et pour chaque appel?

j'ai cette ligne dans visible() par ex:

Code :

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

timer = setTimeout(function() { visible(id); },vitesseFF);

donc pour chaque image, la variable du timer s'appelera "timer", j'aimerai qu'elles aient toutes un nom différent a chaque appel

Comment procéder pour créer une variable dynamiquement?
NB: J'ai id comme variable qui peut différencier chaque appel de fonction...je pourrai éventuellement m'en servir? Mais comment?

**SpaceFrog** · 27/07/2006, 11h03

j'aurais tenté un truc un peu fou du genre faire un push dasn un array avec une nouvelle instanciation du timer ...

Code :

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

1
2
3
4
 
var timers=new Array()
 
timers.push(new timer)

**Eric Berger** · 27/07/2006, 11h05

En utilisant un tableau global pour stocker tes références setInterval, tu peux te servir de l'indice, que tu connais (id) pour invoquer clearInterval en lui passant la bonne référence. Et rien ne t'empêche de faire un mouseout selon le même principe, en utilisant setInterval et en augmentant l'opacité progressivement. Dans ce cas, il faudrait également vérifier lors du mouseOver qu'il n'y a pas nu mouseout en cours.

En espérant avoir répondu à ta question.

Eric

**Eric Berger** · 27/07/2006, 11h10

Envoyé par SpaceFrog

j'aurais tenté un truc un peu fou du genre faire un push dasn un array avec une nouvelle instanciation du timer ...

Code :

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

1
2
3
4
 
var timers=new Array()
 
timers.push(new timer)

Pour pouvoir récupérer le timer pour l'arrêter il aura besoin d'un identifiant, en l'occurence l'id. Il faut donc se servir de l'id comme indice:

Code :

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

timers[idImage] = setInterval....... etc..

**speedev** · 27/07/2006, 11h10

Alors heu...

Spacefrog, merci mais j'ai jamais utiliser de push... éventuellement si tu peux expliciter un peu plus.

Eric, setInterval? Mais j'utilise setTimeout.... Je vois à peu près ce que tu veux dire, je pense aussi qu'id me permettera d'identifier tel ou tel timer...

Et bien voici le code de visible() que j'ai adapté, au cas où vous voyez où intervenir...

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
function visible(id)
{
	vitesseIE=0.00001;
	vitesseFF=60;
	if(document.getElementById(id))
	{
		cur=document.getElementById(id);
		if(document.all)
		{
			cur.filters.alpha.opacity++;
			if (cur.filters.alpha.opacity==100)return;
			else
			{
				timer=setTimeout(function() { visible(id); },vitesseIE);
			}
		}
		else
		{
			i=parseFloat(cur.style.getPropertyValue("-moz-opacity"));
			i+=parseFloat(0.1);
			cur.style.setProperty("-moz-opacity", i, "");
			if (i>=1){return;}
			else
			{
				timer=setTimeout(function() { visible(id); },vitesseFF);
			}
		}
	}
}

**Eric Berger** · 27/07/2006, 11h18

Ici tu utilises un setTimeout qui se recréé tant que l'opacité finale n'est pas atteinte. SetInterval fonctionne exactement de la même façon, mais à la place de s'exécuter une fois après un délai donné, il s'exécuter à l'infini jusqu'à ce que clearInterval soit appelé. Il me semble que ça correspond plus à ce que tu souhaites faire.

Tu trouveras des exemples d'utilisation de setInterval ici et là

**speedev** · 27/07/2006, 11h23

OK merci je teste ça

**Eric Berger** · 27/07/2006, 11h27

Petite précision: Le moteur de mozilla (firefox, netscape) est moins performant pour gérer ces fonctions que celui d'internet explorer. Le résultat sera moins fluide sur mozilla et c'est normal, on ne peut rien y faire.

D'autre part, il arrive que mozilla exécute deux occurences consécutivement, puis laisse passer deux fois le temps avant d'exécuter à nouveau la fonction. lorsqu'il y a "beaucoup à faire", j'ai rencontré ce problème sur le site wavre.ch ou, tout comme toi, j'utilise un effet de fondu, mais en même temps une barre de progression et déclanche l'affichage de l'image suivante du diaporama.

Si cette erreur n'a pas de conséquences pour les deux premières utilisations hormis une petite saccade, pour la dernière en revenche, ça revient à manquer une photographie. J'ai résolu le problème en testant le nombre de ms depuis la dernière exécution et si le temps est trop court, j'annule l'action et la replanifie.

Voilà voilà, c'est un peu hors sujet, mais enfin, ça peut servir

**speedev** · 27/07/2006, 11h38

ok ok merci.

J'essaye d'abord de tester le set interval... a priori ça fonctionne, mais le seul soucis c'est qu'il n'incrément ou décrémente qu'une fois.

**Eric Berger** · 27/07/2006, 11h49

C'est qu'il faut inverser ton script. Il enregistrait un settimout si on a pas atteint l'opacité cible, alors que là, tu sois invoquer clearinterval si on l'a atteinte.

D'autre part le setInterval doit être fait à l'extérieur de la fonction, à l'endroit où tu l'invoquais avant.

**speedev** · 27/07/2006, 11h52

Ouais j'essaye de m'en tirer là mais j'm'en sors mal.

C'est qu'il faut inverser ton script. Il enregistrait un settimout si on a pas atteint l'opacité cible, alors que là, tu sois invoquer clearinterval si on l'a atteinte.

Ok j'essaye

D'autre part le setInterval doit être fait à l'extérieur de la fonction, à l'endroit où tu l'invoquais avant.

Ben je l'invoquais pas setInterval avant...mais je vois ce que tu veux dire

**speedev** · 27/07/2006, 11h57

Ouais non heu je pige pas trop, c'est ça que tu me demandes?

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
function visible(id)
{
	vitesseIE=50;
	vitesseFF=50;
	if(document.getElementById(id))
	{
		cur=document.getElementById(id);
		if(document.all)
		{
			cur.filters.alpha.opacity++;
			if (cur.filters.alpha.opacity==100)
			{	
				clearInterval();
				return;
			}
			else
			{
				timers = setInterval(visible, vitesseIE);
			}
		}

**Eric Berger** · 27/07/2006, 11h58

Envoyé par speedev

Ben je l'invoquais pas setInterval avant...mais je vois ce que tu veux dire

Je veux dire là où tu invoquais visible()

**speedev** · 27/07/2006, 12h02

haaaa!

Tu veux en gros que je créer une fonction intermittente que j'appelle directe sur le onmouseover qui lance un setinterval et qui controle l'état de l'opacité ...suivant l'état il tue le setinterval ou bien il continue d'appeler visible.

**Eric Berger** · 27/07/2006, 12h17

Pas exactement...

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
 
overs = Array()
 
function over(){
  clearInterval(outs[this.id])//juste un exemple si tu veux faire un dégradé sur le out
  overs[this.id] = setInterval(visible, vitesse)
}
 
function visible(id){
  cur=document.getElementById(id);
  cur.filters.alpha.opacity++;
  if (cur.filters.alpha.opacity==100){	
	clearInterval(overs[cur.id])
  }
}

Le code est incomplet, mais tu as le principe...

**speedev** · 27/07/2006, 12h20

ouais là en gros tu spécifie un timer unique par image, je teste.

**Eric Berger** · 27/07/2006, 12h39

On peut voir le résultat quelque-part?

**speedev** · 27/07/2006, 12h40

bé non je développe ça en local dans ma boite.

Par contre dans ton exemple, si j'appelle la fonction over() sans paramètre....il ne peut pointer sur this.id

**speedev** · 27/07/2006, 12h48

OK NICKEL!
Ca marche sur FF! Je passe à IE.

[setTimeOut] Multiples retardateurs

JavaScript

Discussions similaires

Partager

Partager