[setTimeOut] Multiples retardateurs

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

Bon et bien ça marche vaguement....ya plus de clignotement.
Mais si je bouge la souris a très bonne vitesse sur les images, certaines vont devenir complètement invisibles [mais elles se réaffichent correctement avec un autre passage de souris]. En gros il n'y a aucun passage dans la condition de fin du setinterval.

Voici mon code:

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
overs = Array();
outs = Array();
 
function over(id){
	vitesseIE=1;
	vitesseFF=80;
  	clearInterval(outs[id]);
  	if(document.all)
  		overs[id] = setInterval(function() { visible(id); },vitesseIE);
	else
		overs[id] = setInterval(function() { visible(id); },vitesseFF);
}
function out(id){
	vitesseIE=1;
	vitesseFF=80;
  	clearInterval(overs[id]);
  	if(document.all)
  		outs[id] = setInterval(function() { invisible(id); },vitesseIE);
	else
		outs[id] = setInterval(function() { invisible(id); },vitesseFF);
}
 
function visible(id)
{	
	if(document.getElementById(id))
	{
		cur=document.getElementById(id);
		if(document.all)
		{
			cur.filters.alpha.opacity++;
			if (cur.filters.alpha.opacity==100)
			{	
				clearInterval(overs[cur.id]);
				return;
			}
		}
		else
		{
			i=parseFloat(cur.style.getPropertyValue("-moz-opacity"));
			i+=parseFloat(0.1);
			cur.style.setProperty("-moz-opacity", i, "");
			if (i>=1)
			{
				clearInterval(overs[cur.id]);
				return;
			}
		}
	}
}
function invisible(id)
{
	vitesseIE=0.1;
	vitesseFF=60;
	if(document.getElementById(id))
	{
		cur=document.getElementById(id);
		if(document.all)
		{
			cur.filters.alpha.opacity--;
			if (cur.filters.alpha.opacity==20)
			{
				clearInterval(outs[cur.id]);
				return;
			}
		}
		else
		{
			i=parseFloat(cur.style.getPropertyValue("-moz-opacity"));
			i-=parseFloat(0.1);
			cur.style.setProperty("-moz-opacity", i, "");
			if (i<=0.20)
			{
				clearInterval(outs[cur.id]);
				return;
			}
		}
	}
}

**Eric Berger** · 27/07/2006, 15h13

essaie d'ajouter un clearInterval(outs[id]) dans la fonction out et un clearInterval(overs[id]) dans la fonction over.

Si tu as deux outs qui se produisent en très peu de temps et que le premier n'a pas été arrêté, un deuxième sera créé et écrasera la référence du premier qui ne pourra plus être arrêté. La modification ci-dessus devrait éviter ce problème

**speedev** · 27/07/2006, 15h18

Ha oui exact, ça devrait remédier au soucis, merci.

**speedev** · 27/07/2006, 17h53

Arf le soucis est le même!
Bon je vais réfléchir à tout ça, là je finis le boulot.
J'm'y replonge demain.

Merci eric

**Eric Berger** · 27/07/2006, 18h40

C'est rien.. désolé mais là je sèche un peu...

Si tu as du nouveau n'hésite pas

**FremyCompany** · 27/07/2006, 20h43

Pour commencer :

Code :

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

over=Array()

==>

Code :

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

over=new Array()

**speedev** · 28/07/2006, 11h05

ok fremy, c'est corrigé.
Mais l'erreur est la même.
En gros j'arrive a effacer totalement une image en passant la souris dessus a plusieurs reprises rapide. Le onmouseout n'a donc pas le temps de s'executer pour la réafficher progressivement.

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
 
overs = new Array();
outs = new Array();
 
function over(id){
	vitesseIE=20;
	vitesseFF=20;
  	clearInterval(outs[id]);
  	if(document.all)
  		overs[id] = setInterval(function() { visible(id); },vitesseIE);
	else
		overs[id] = setInterval(function() { visible(id); },vitesseFF);
 
}
function out(id){
	vitesseIE=20;
	vitesseFF=20;
  	clearInterval(overs[id]);
  	if(document.all)
  		outs[id] = setInterval(function() { invisible(id); },vitesseIE);
	else
		outs[id] = setInterval(function() { invisible(id); },vitesseFF);
 
}

**Eric Berger** · 28/07/2006, 11h08

essaie d'afficher quelque-part sur ta page les appels aux différentes fonctions et les valeurs d'opacité. Ainsi tu verras mieux ce qui se passe sur ta page.

**FremyCompany** · 28/07/2006, 14h07

Envoyé par Eric Berger

essaie d'afficher quelque-part sur ta page les appels aux différentes fonctions et les valeurs d'opacité. Ainsi tu verras mieux ce qui se passe sur ta page.

Je crois qu'il veut dire une sorte de console

**speedev** · 28/07/2006, 14h49

Lol fremy, j'ai bien pigé.

Je viens provisoirement de passer à autre chose. Je vais revenir sur ce soucis toute a l'heure.
Là je fais en sorte que les images (peu importe le nombre) générées arrivent sur l'écran comme un jeu de carte provenant de nulle part (d'en dehors de l'écran) et se disposent tel un damier. Suivant la taille du div conteneur, les images se positionneront dans un plus ou moins grand nombre de colonne...
et ça le fait pour l'instant!

Par contre oui, l'effet d'opacité déconne si on bouge rapidement la souris sur les images...elles disparaissent plus ou moins. j'y reviendrai toute a l'heure.
Je commence à bien manoeuvrer avec setInterval.

**speedev** · 28/07/2006, 17h03

Ok c'est bon, l'affichage animé des images en jeu de carte fonctionne parfaitement avec les retardateurs multiples...tous stockés en tableau global et tués quand il faut.

Je vais donc tenter cette technique sur l'opacité des images et poster le code si ça marche!

merci encore.

**speedev** · 31/07/2006, 09h44

Me revoilà.

Donc j'ai trouvé précisément quel était le soucis et peut-être pourrez vous m'aider.

J'ai donc une fonction avec une boucle for{}, et a chaque fin de boucle j'appelle une autre fonction qui ajoute un timer dans le tableau des timers avec les paramètres adéquate et qui est donc tué dans une autre fonction qui execute l'action pour l'objet.

mécanisme:
fonction 1 --> boucle for{} qui étudie chaque objet et créer les paramètres
fonction 2 --> reçoit les paramètres d'un objet et créer son timer setInterval
fonction 3 --> exécute l'action pour l'objet et tue son timer une fois finie

Ce qui fonctionne: Chaque action pour chaque objet s'éxecute parfaitement, chaque timer est tué comme il faut...aucun débordement, aucune saturation... nickel. Visuellement, chaque image part d'un point sur l'écran et arrive à sa destination pré-calculée.

Le soucis: C'est qu'on ne peut stopper un traitement javascript et que par conséquent tous mes timers sont créer d'un seul coup et toutes les actions s'exécutent en mm tps. Pourquoi? Parceque je passe d'abord par une boucle for et qui n'attent pas que la première action soit terminée dans la fonction 3....elle engendre donc la création de tous les timers en même temps. L'effet n'est pas ideux non plus car chaque image se déplace vers sa destination et se stoppe donc une fois arrivée pendant que les autres continuent...seulement elles partent toutes en mm tps.
Le soucis est exactement le même pour l'effet d'opacité sur le onMouseOver....la boucle de création d'opacité progressive n'attend pas qu'un timer toi tué.

Connaissez-vous un moyen de bloquer temporairement une boucle javascript le temps qu'un timer soit tué? Sinon....comment faire autrement?

Merci

**FremyCompany** · 31/07/2006, 10h13

Bien sur, il y a toujours moyen, mais n'oublions pas que tant que JavaScript est en execution, la page Web est figée... Il faut donc oublier des conneries comme while... Je propose un set de trois données :

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
var TimerData={
    "Data":new Array(), // Ensemble des objets pour lesquels faire le traitement
    "Item":0, // Position de l'objet courrant dans les données
    "BreakTime":0, // Temps entre l'execution de threads
    "Next":function() { // Fonction executée à la fin de l'execution d'un thread
        this.executingMethod(this.Data[this.Item])
        this.Item++;
        if (this.Data[this.Item]) {
             setTimeout("TimerData.Next()", this.BreakTime)
        }
    },
    "executingMethod":function(Item) {
        Item.style.display="none";
    }
}

**speedev** · 31/07/2006, 10h20

Intéressant...
Mais je suis obligé de passer par une boucle.
Je reçois le nombre d'images par un script php, je fais obligatoirement une boucle qui les traite une par une en javascript.

Et je ne vois pas comment ta parcelle de code peut bloquer l'exécution de ma boucle principale...en fait c'est même sûr qu'elle ne peut pas.

**Eric Berger** · 31/07/2006, 10h31

J'ai une autre approche.

Ta fonction 2, à la place de déclancher un setInterval, déclanche un setTimout dont le timeout est aléatoire (dans un intervale défini, bien sur). le setTimout déclanche la fonction 3.

Dans la fonction 3, tu détectes si on est dans la première exéxution et si c'est le cas, tu créé le setInterval qui était déclanché par la fonction 2.

Pour détecter si on est dans la première exécution ou non, tu peux vérifier le contenu de ton tableaude références setInterval par exemple, étant donné qu'à la première exécution de la fonction 3, l'indice correspondant ne contient pas encore de référence.

**speedev** · 31/07/2006, 10h41

lol

Bon alors je résume ton approche:

fonction 1 --> parcours chaque objet, initialisations des paramètres, calculs...
fonction 2 --> setTimeOut dont le laps d'exécution change pour chaque objet afin de séparer les exécutions
fonction 3 --> setInterval dans le cas ou on est sur le 1er objet.
fonction 4 --> Exécution

Ya de l'idée...j'essaye...merci

**FremyCompany** · 31/07/2006, 10h48

Je ne vois pas ou est le problème avec ma méthode...

Code :

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

1
2
3
4
5
6
7
8
9
10
// Ajout de données
TimerData.Data=GeneratedArray;
// Traitement à appliquer à chaque objet contenu dans les données
TimerData.executingMethod=function (Item /* As Object*/) {
    // Item est à chaque fois le membre suivant du tableau
};
// Chosir le temps séparant chaque execution, en ms
TimerData.BreakTime=1000;
// Et le plus important, commencer la procédure
TimerData.Next();

EDIT:
Le problème avec votre methode, c'est que vous allez mettre des setInterval dans des setTimeout, déclanché par des procédures... et vous allez finir par ne plus savoir changer quoique ce soit... Mieux vaut une solution simple qu'une solution basée sur la multiplicité des opérations...

**speedev** · 31/07/2006, 10h54

Le principal problème c'est que ça me parait compliqué à adapter dans mon code lol. D'autant que je ne connais pas les classes d'objets en javascript...que j'ai jamais essayé quoi.

Il me faudrait des exemples concrets.
Si je parviens pas à faire fonctionner l'espacement de mes traitements avec le code d'eric je me plongerai dans ton code plus complexe à mon goût.
Je développe du javascript depuis qlq mois seulement...depuis mon embauche quoi, donc il me manque pas mal de connaissances encore! Mais merci...merci merci!

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

bisarre....j'espace le setTimeOut de plus en plus et pourtant tout s'exécute en meme temps...
Voici une simplification du code:

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
function one{
<div style="margin-left:40px">for{
[...]
<div style="margin-left:40px"><div style="margin-left:40px">two(i,tab_to[i][0],tab_to[i][1]);</div></div>}</div>
}
function two(i,l,h)
{
	delais = i*2;
	setTimeout(function(){three(i,l,h)},delais);
}
 
function three(i,l,h)
{
<div style="margin-left:40px">four()</div>}
function four
{
<div style="margin-left:40px">//exécution</div>}