Math.random / setTimeout

Version imprimable

Bonjour,

J'ai repris un script permettant de faire défiler des images avec un effet de fondu enchaîné.
Code:

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 var delay = 1000; var start_frame = 0; function init() { var lis = $('slide-images').getElementsByTagName('li'); for( i=0; i < lis.length; i++){ if(i!=0){ lis[i].style.display = 'none'; } } end_frame = lis.length-1; start_slideshow(start_frame, end_frame, delay, lis); } function start_slideshow(start_frame, end_frame, delay, lis) { setTimeout(fadeInOut(start_frame,start_frame,end_frame, delay, lis), delay); } function fadeInOut(frame, start_frame, end_frame, delay, lis) { return (function() { lis = $('slide-images').getElementsByTagName('li'); Effect.Fade(lis[frame]); //if (frame == end_frame) { frame = start_frame; } else { frame++; } frame=Math.floor(Math.random()*10); lisAppear = lis[frame]; setTimeout("Effect.Appear(lisAppear);", 0); setTimeout(fadeInOut(frame, start_frame, end_frame, delay), delay + 1850); }) }
Mon soucis est le suivant :

Initialement, le script fait défiler les images les unes à la suite des autres. (expression commentée en rouge gras).

Mais j'aimerais que les images défilent de manière aléatoire, j'ai donc modifié le script en substituant le code en gras bleu.

Cependant, cette modification entraîne un mauvais fonctionnement du script : de temps en temps j'ai un rectangle blanc qui apparaît au lieu d'une image. Ce n'est pas reproductible, le phénomène est vraiment aléatoire. J'ai cherché durant 3 jours et je ne trouve absolument pas...
Je me demandais si ce n'était pas un problème avec le setTimeout qui se lancerait avant que la fonction ait finie de s'exécuter, mais pourquoi le fait de générer un nombre aléatoire entraînerait ce genre d'erreur ? Je suis perdu...:(

Merci d'avance pour votre aide,

P.S : j'ai 10 images déclarées dans 10 balises <li..> d'où le *10 pour le random.

28/07/2009, 08h22
nod__
Encore un type qui a pas écouté en cours de math celui qui a fait le script.
Code:

1 2 3 4 frame=Math.floor(Math.random()*10); lisAppear = lis[frame % lis.length]; Effect.Appear(lisAppear);
Le setTimeout sert a rien aussi
28/07/2009, 10h12
Oropher_ea

Tout d'abord merci pour ta réponse.
Je viens de modifier le code avec l'ajout du modulo mais cela ne marche pas mieux, j'ai toujours un carré blanc qui apparaît de manière aléatoire...

J'avais déjà essayé de borner avec un modulo, mais apparement, ce n'est pas "frame" le problème, la variable est bien calculée et renvoie toujours quelque chose compris entre 0 et 9 pour mon exemple.

D'autres idées ?

Merci
28/07/2009, 10h33
nod__

T'as pas un petit bout de html aussi ? vu d'ici y'a rien de flagrant sur l'apparition d'un carré blanc.

Si bien sûr.

Le script peut être trouvé sur le site :

http://www.andrewsellick.com/examples/simple-slide-show/

N'ayant pas la page sous la main, j'ai refait un code simple :

Code:

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
 
<html>
<head>
 
  <script src="http://www.andrewsellick.com/examples/simple-slide-show/js/prototype.js" type="text/javascript"></script>
  <script src="http://www.andrewsellick.com/examples/simple-slide-show/js/scriptaculous.js" type="text/javascript"></script>
  <script src="simple-slide-show.js" type="text/javascript"></script>
 
 
 
<style>
 
#slide-images{
	position:relative;
	display:block;
	margin:0px;
	padding:0px;
	width:400px;
	height:300px;
	overflow:hidden;
}
 
#slide-images li{
	position:absolute;
	display:block;
	list-style-type:none;
	margin:0px;
	padding:0px;
	background-color:#FFFFFF;
}
 
#slide-images li img{
	display:block;
	background-color:#FFFFFF;
}
 
</style>
</head>
<body>
<div id="slide-show">
 
<ul id="slide-images">
	<li><img src="images/one.jpg" alt="One" title="One" /></li>
	<li><img src="images/two.jpg" alt="Two" title="Two" /></li>
	<li><img src="images/three.jpg" alt="Three" title="Three" /></li>
	<li><img src="images/four.jpg" alt="Four" title="Four" /></li>
 
</ul>
 
 
</div>
 
 
 
</body>
</html>

avec le javascript simple-slide-show.js suivant :

Code:

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
var delay = 1000;
var start_frame = 0;
 
function init() {
	var lis = $('slide-images').getElementsByTagName('li');
 
	for( i=0; i < lis.length; i++){
		if(i!=0){
			lis[i].style.display = 'none';
		}
	}
	end_frame = lis.length -1;
 
	start_slideshow(start_frame, end_frame, delay, lis);
 
 
}
 
 
 
function start_slideshow(start_frame, end_frame, delay, lis) {
	setTimeout(fadeInOut(start_frame,start_frame,end_frame, delay, lis), delay);
}
 
 
function fadeInOut(frame, start_frame, end_frame, delay, lis) {
	return (function() {
		lis = $('slide-images').getElementsByTagName('li');
		Effect.Fade(lis[frame]);
		//if (frame == end_frame) { frame = start_frame; } else { frame++; }
		frame=Math.floor(Math.random()*4);
		lisAppear = lis[frame % lis.length];
		Effect.Appear(lisAppear);
		setTimeout(fadeInOut(frame, start_frame, end_frame, delay), delay + 1850);
	})
 
}
 
 
Event.observe(window, 'load', init, false);

Merci encore !

Quand je regarde le script tourner (le script avec le random comparé à sa version linéaire), on a l'impression que l'effet a du mal à se faire, comme si la fonction était ralentie ou quelque chose faisait ramer le processus...
Serait-il possible que d'invoquer deux fois l'objet Math pour le floor et random gène la fonction niveau temps d'execution ?
C'est juste une idée, je ne suis pas codeur à la base, juste amateur ^^