JavaScript et setTimeout.Besoin information

**ovcrash** · 16/05/2009, 16h54

Bonjour,

Voici mon code :

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
<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!

**emmanuel.remy** · 16/05/2009, 18h22

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

est erroné.

ERE

**ovcrash** · 16/05/2009, 18h35

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

**emmanuel.remy** · 16/05/2009, 18h57

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 :

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

**ovcrash** · 16/05/2009, 20h11

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.

**emmanuel.remy** · 17/05/2009, 00h56

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 :

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

JavaScript et setTimeout.Besoin information

JavaScript

Vue hybride

Discussions similaires

Partager

Partager