setInterval, incohérence de chargement [Résolu]

helkøwsky · 28/09/2011, 14h43

Bonjour à tous,

je sais pas si mon titre est super explicite mais c'est ce que j'ai trouvé de mieux. Mon soucis c'est que j'ai un code avec deux fonction temporelle l'idée c'est d'avoir quatre balise qui deviennent transparente les unes-après les autres et qu'une fois la dernière transparente le cycle recommence. Sauf qu'au premier passage la première balise ne devient pas complètement transparente alors que les autres si (du certainement à un décalage de chargement quand je le teste sur le site). Puis au deuxième passage la rapidité de la transparence s’accélère jusqu'à devenir quasiment instantanée:

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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
  <div id="bobo0" style="width:100px; height:100px; background-color:black"></div>
    <div id="bobo1" style="width:100px; height:100px; background-color:yellow"></div>
    <div id="bobo2" style="width:100px; height:100px; background-color:green"></div>
    <div id="bobo3" style="width:100px; height:100px; background-color:orange"></div>
 
	<script type="text/javascript">
		// Fonction qui gère l'opacity sur tous les navigateurs
		// l'opacity doit être comprise entre 0 et 1
		function gen_opacity(obj,opacity){
 
		  //Internet explorer
		  obj.style.filter = 'alpha(opacity = ' + opacity*100 + ')' ;
 
		  //Ayant CSS3 intégré
		  obj.style.opacity = opacity;
 
		  //Mozilla/Phoenix/Firebird/Firefox
		  obj.style.MozOpacity = (opacity);
 
		  //moteur Khtml Linux safair et macOS
		  obj.style.KhtmlOpacity = (opacity);
 
		 }
 
		// variable globales		
		var x=-1,w,div_conteneur=[];
 
		// Récupération des balise div avec id bobo[x] dans le tableau div_conteneur
		div_list = document.getElementsByTagName('div');
		if(div_list)
		{
			for(w=0;w<div_list.length;w++)
			{
				if(div_list[w].id.indexOf('bobo'+w)!=-1)
				{
					div_conteneur.push(div_list[w]);
				}
			}
		}
function init(){
		//Creation de la première fonction setinterval
		var intervalID1 = setInterval(function() {
			// permet a chaque lancement de remettre y = 1 ou y est l opacité dans la deuxième fonction
			y=1;
 
			//Deuxième fonction setinterval qui transforme l opacité à 0 progressivement
            var intervalID2 = setInterval(function() {
						y-= 0.005;
							if(y>0)
							{
								// on appelle la fonction gen_opacity
								gen_opacity(div_conteneur[x],y);
							}
 
							// si y <= à 0 alors on arrête la boucle
							else
							{
								clearInterval(intervalD); 
							}
                        }, 10);
 
						// Permet d'atteindre toutes les balises contenue dans div_conteneur[x] 
						x+=1;
 
						// Si x est plus grand que la taille de l'array alors la boucle doit recommencer à x=-1 
						if(x>div_conteneur.length)
						{
							var i;
 
							// permet de remettre opacity à 1 dans toutes les div
							for(i=0;i<div_conteneur.length;i++)
							{
								gen_opacity(div_conteneur[i],1);
								x=-1;
							}
						}										
  }, 2100);}
  window.onload=init;
  	</script>
  </body>
</html>

j'ai inclut le code html avec pour que vous pussiez vous rendre compte.

D'avance merci à ceux qui prendront le temps de répondre.

andry.aime · 28/09/2011, 14h54

Bonsoir,

C'est l'effet boule de neige. Dans ton setIterval, un autre setInterval est encore créé qui va encore lui même créer d'autre.

A+.

helkøwsky · 28/09/2011, 16h41

merci,

mais alors quelle piste pourrais tu me donner comme solution ?

SpaceFrog · 28/09/2011, 16h45

utilise run setTimeout
ou eviter de lancer en boucle le setInterval ...

Eric2a · 29/09/2011, 03h08

Salut,

Oui un seul SetTimeout() peut faire l'affaire...

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Test</title>
	<script type="text/javascript">//<![CDATA[
		var
			curDiv=0,
			curOpacity=1.0,
			div_conteneur=[];
 
		function setOpacity(obj,opacity){
			obj.style.opacity=opacity;
			obj.style.filter='alpha(opacity='+opacity*100+')';
			obj.style.MozOpacity=(opacity);
			obj.style.KhtmlOpacity=(opacity);
		}
 
		function fadeout(){
			var i;
			curOpacity-=0.1;
			if(curOpacity>0)
				setOpacity(div_conteneur[curDiv],curOpacity);
			else{
				curOpacity=1.0;
				if(curDiv<div_conteneur.length-1)
					setOpacity(div_conteneur[curDiv],0);
				else
					for(i=0;i<div_conteneur.length;i++)setOpacity(div_conteneur[i],1.0);
 
				curDiv=(curDiv+1)% div_conteneur.length; // Reste de : (curdiv + 1) / Nombre de divs
			}
			setTimeout(fadeout,100);
		}
 
		function init(){
			var i,
				div_list=document.getElementsByTagName('div');
 
			if(div_list){
				for(i=0;i<div_list.length;i++){
					if(div_list[i].id.indexOf('bobo'+i)!=-1)div_conteneur.push(div_list[i]);
				}
				if(div_conteneur.length>0)fadeout();
			}
		}
 
		window.onload=init;
		//]]>
	</script>
</head>
<body>
	<div id="bobo0" style="width:100px; height:100px; background-color:black"></div>
	<div id="bobo1" style="width:100px; height:100px; background-color:yellow"></div>
	<div id="bobo2" style="width:100px; height:100px; background-color:green"></div>
	<div id="bobo3" style="width:100px; height:100px; background-color:orange"></div>
</body>
</html>

helkøwsky · 29/09/2011, 16h43

merci pour vos réponses.

@eric2a : toujours aussi complète et clair tes réponses merci beaucoup.

28/09/2011, 16h45	#4
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 040 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 040 Points : 45 141 Points : 45 141	utilise run setTimeout ou eviter de lancer en boucle le setInterval ... __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

28/09/2011, 14h54	#2
andry.aime Rédacteur/Modérateur Andry Aimé Inscription : septembre 2007 Messages : 5 129 Détails du profil Informations personnelles : Nom : Andry Aimé Localisation : Ile Maurice Informations forums : Inscription : septembre 2007 Messages : 5 129 Points : 7 258 Points : 7 258	Bonsoir, C'est l'effet boule de neige. Dans ton setIterval, un autre setInterval est encore créé qui va encore lui même créer d'autre. A+.
	00

28/09/2011, 16h41	#3
helkøwsky Nouveau Membre du Club Inscription : avril 2009 Messages : 89 Détails du profil Informations forums : Inscription : avril 2009 Messages : 89 Points : 37 Points : 37	merci, mais alors quelle piste pourrais tu me donner comme solution ?
	00

29/09/2011, 16h43	#6
helkøwsky Nouveau Membre du Club Inscription : avril 2009 Messages : 89 Détails du profil Informations forums : Inscription : avril 2009 Messages : 89 Points : 37 Points : 37	merci pour vos réponses. @eric2a : toujours aussi complète et clair tes réponses merci beaucoup.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email