setInterval, incohérence de chargement

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

setInterval, incohérence de chargement

JavaScript

Vue hybride

Discussions similaires

Partager

Partager