IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

setInterval, incohérence de chargement


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Avril 2009
    Messages
    137
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Avril 2009
    Messages : 137
    Par défaut setInterval, incohérence de chargement
    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.

  2. #2
    Rédacteur/Modérateur
    Avatar de andry.aime
    Homme Profil pro
    Inscrit en
    Septembre 2007
    Messages
    8 391
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ile Maurice

    Informations forums :
    Inscription : Septembre 2007
    Messages : 8 391
    Par défaut
    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+.

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Avril 2009
    Messages
    137
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Avril 2009
    Messages : 137
    Par défaut
    merci,

    mais alors quelle piste pourrais tu me donner comme solution ?

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    utilise run setTimeout
    ou eviter de lancer en boucle le setInterval ...
    Ma page Developpez - Mon Blog 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

    Venez sur le Chat de Développez !

  5. #5
    Membre Expert
    Avatar de Eric2a
    Homme Profil pro
    Technicien
    Inscrit en
    Septembre 2005
    Messages
    1 225
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Corse (Corse)

    Informations professionnelles :
    Activité : Technicien

    Informations forums :
    Inscription : Septembre 2005
    Messages : 1 225
    Par défaut
    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>

  6. #6
    Membre confirmé
    Profil pro
    Inscrit en
    Avril 2009
    Messages
    137
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Avril 2009
    Messages : 137
    Par défaut
    merci pour vos réponses.

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

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Page de chargement avec window.setInterval
    Par frechy dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 17/08/2006, 11h34
  2. action APRES chargement complet ...
    Par PinGuy dans le forum Delphi
    Réponses: 7
    Dernier message: 06/07/2006, 17h16
  3. [Kylix] Chargement de libraries
    Par _dack_ dans le forum EDI
    Réponses: 1
    Dernier message: 14/03/2003, 09h07
  4. Chargement d'une texture a partir de la mémoire
    Par logramme dans le forum DirectX
    Réponses: 6
    Dernier message: 27/01/2003, 14h57
  5. Chargement dynamique de DLL sous Unix
    Par Willou dans le forum Autres éditeurs
    Réponses: 7
    Dernier message: 18/12/2002, 18h25

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo