JavaScript et setTimeout.Besoin information

Version imprimable

Bonjour,

Voici mon code :

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
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var interval = 15; // delay between rotating images (in seconds)
interval *= 1000;
 
var image_index = 0;
image_list = new Array();
image_list[image_index++] = new imageItem("image1.jpg");
image_list[image_index++] = new imageItem("image2.jpg");
image_list[image_index++] = new imageItem("image3.jpg");
image_list[image_index++] = new imageItem("image4.jpg");
var number_of_image = image_list.length;
 
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
 
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
 
function getNextImage() {
image_index = (image_index+1) % number_of_image;
var new_image = setTimeout(get_ImageItemLocation(image_list[image_index]), 5000);
return(new_image);
}
 
function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "rotateImage('"+place+"')";
setTimeout(recur_call, interval);
}
 
//  End -->
</SCRIPT>
</HEAD>
 
<BODY OnLoad="rotateImage('rImage')">
 
<center>
<img name="rImage" src="image1.jpg" width=320 height=240>
</center>
</BODY>
</HTML>

Finalement je veux que ce code, fasse une rotation de 4 images, les images change au 120 secondes mais de plus pendant que cette image est afficher pendant les 120 secondes, elle doit se mettre a jour au 5 secondes.

Donc il devrait avoir deux timer, embriquer.
Mais avec le code que j'ai plus haut, ca me donne une erreur dans le <HEAD> que je comprend difficilement.

De l'aide serait apprecier.
Merci!

16/05/2009, 18h22
emmanuel.remy

Salut,
Attention car la fonction setTimeout exécute du code après un délai de n millisecondes, mais elle renvoie l'id du timer et non le résultat de l'appel du code. Donc ton code:

Code:

var new_image = setTimeout(get_ImageItemLocation(image_list[image_index]), 3000);

est erroné.

ERE
16/05/2009, 18h35
ovcrash

Merci de l'information.
Donc quelle est la modification que je dois apporté ?

Piste

Ci-dessous une solution vite faite (donc à adapter); j'ai gardé l'esprit de ton code même si certaines simplifications sont réalisables:

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
57
58
59
60
61
62
63
64
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var interval = 12; // delay between rotating images (in seconds)
interval *= 12000;
 
//l'élément DOM de la modification 
var elemPlace;
 
var image_index = 0;
image_list = new Array();
image_list[image_index++] = new imageItem("image1.jpg");
image_list[image_index++] = new imageItem("image2.jpg");
image_list[image_index++] = new imageItem("image3.jpg");
image_list[image_index++] = new imageItem("image4.jpg");
var number_of_image = image_list.length;
 
function imageItem(image_location) {
   this.image_item = new Image();
   this.image_item.src = image_location;
}
 
function get_ImageItemLocation(imageObj) {
   return(imageObj.image_item.src)
}
 
function getNextImage() {
  image_index = (image_index+1) % number_of_image;
  return(image_list[image_index]);
}
 
//la fonction de rafraichissement au bout de n secondes 
var refresh = function(img) {
  return function() {
    elemPlace.src = img.image_item.src;
    //pour info
    document.getElementById("info").innerHTML += "<br>Refresh - " + img.image_item.src;
  };
} 
 
function rotateImage(place) {
   elemPlace = document.getElementById(place); 
   var new_image = getNextImage();
   elemPlace.src = new_image.image_item.src;
   //on rafraichit cette image après 5 secondes
   setTimeout(refresh(new_image), 5000);
 
   var recur_call = "rotateImage('"+place+"')";
   setTimeout(recur_call, interval);
}
 
//  End -->
</SCRIPT>
</HEAD>
 
<BODY OnLoad="rotateImage('rImage')">
 
<center>
<img id="rImage" src="image1.jpg" width=320 height=240>
<div id="info"></div>
</center>
</BODY>
</HTML>

Bon dev,

ERE

16/05/2009, 20h11
ovcrash

J'ai essaie le script que vous avez si gentilement offert. Mais ca ne fonctionne pas dutout, ca fait juste mettre une ligne de text après 5 secondes, mais ca ne rafraichit pas l'image au 5 secondes ensuite on fait un changement de l'image au 45 secondes.

Merci de votre aide.

Citation:

Envoyé par ovcrash

(...) mais ca ne rafraichit pas l'image au 5 secondes ensuite on fait un changement de l'image au 45 secondes.

Merci de votre aide.

Tout ne peut pas arriver toujours rôti, il faut aussi prendre le temps d'adapter... Donc ton souci est aussi lié au fait qu'il y a le cache du navigateur à outre passer...

Donc (j'en profite du coup pour changer un peu ton code):

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
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var interval = 12; // delay between rotating images (in seconds)
interval *= 1000;
 
//l'élément DOM de la modification 
var elemPlace;
 
var image_index = 0;
image_list = ["image1.jpg","image2.jpg", "image3.jpg","image4.jpg"];
var number_of_image = image_list.length;
 
 
//la fonction de rafraichissement au bout de n secondes 
//on force le rafraichissement ...
var refresh = function(img) {
  return function() {
    unique = new Date();
 
    elemPlace.src = img + "?unique=" + unique.getTime();
    //pour info
    document.getElementById("info").innerHTML += "<br>Refresh - " + elemPlace.src;
  };
} 
 
function rotateImage(place) {
   elemPlace = document.getElementById(place); 
   image_index = (image_index+1) % number_of_image;
   var new_image = image_list[image_index];
   elemPlace.src = new_image;
   //on rafraichit cette image après 5 secondes
   setTimeout(refresh(new_image), 5000);
 
   var recur_call = "rotateImage('"+place+"')";
   setTimeout(recur_call, interval);
}
 
//  End -->
</SCRIPT>
</HEAD>
 
<BODY OnLoad="rotateImage('rImage')">
 
<center>
<img id="rImage" src="image1.jpg" width=320 height=240>
<div id="info"></div>
</center>
</BODY>
</HTML>

ERE