Un simple timer: impossible de remettre à 0

**raphchar** · 01/04/2011, 21h14

Bonjour j'ai un gros problème:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
var temps;
temps=0;
function heure()
{
 document.myform.mytext.value=temps;
 this.temps++;
}
function reset()
{
  this.temps=0;
}
 
setInterval("heure()",1000);

Voila mon script qui devrait fonctionner:
le timer avance 1,2;3 on appelle reset et il affiche 0,4,5 !!
il y a donc un probleme!!
Savez vous comment le résoudre?

Merci de m'aider

rapchar

**Nesmontou** · 01/04/2011, 21h21

Bonsoir,

Le problème vient du fait que tu manipules this.temps à la place de temps.

Tu peux essayer ceci

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
<!DOCTYPE html>
<html>
	<head>
		<title>JS - Timer</title>
 
		<script type="text/javascript">
			var temps = 0;
 
			function heure() {
				document.getElementById("heure").value = temps++;
			}
 
			function reset() {
				temps = 0;
			}
 
			setInterval("heure()", 1000);
		</script>
	</head>
	<body>
		<input id="heure" readonly type="text">
		<button onclick="reset();">Reset</button>
	</body>
</html>

Bon développement

**laurentg2003** · 01/04/2011, 22h39

Je pense que le problème vient du fait que quand tu appelle resset tu ne stop pas ton setInterval("heure()", 1000);
donc temps revient dans reset à zero d'ou le zero et l'appel de setInterval reprend puisqu'il n'est pas stoppé et donc 4,5 etc
essaye ça

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
 
<script type="text/javascript">
			var temps = 0;
 
			function heure() {
				document.getElementById("heure").value = temps++;
                             timer= setInterval("heure()", 1000);
			}
 
			function reset() {
				temps = 0;
                                clearInterval(timer);  
			}
 
 
		</script>

il faut donc ajouter clearInterval(timer);et mettre le timer= setInterval("heure()", 1000); dans heure() et appeler heure() une 1ere fois dans un click ou tu veux idem pour resset il faut qu'une fois que setinterval est stoper pouvoir le relancer genre sur un bouton

**nadox** · 01/04/2011, 23h32

@laurentg2003 : Ce n'est pas un setTimeout !

Code :

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

1
2
3
4
5
 
			function heure() {
				document.getElementById("heure").value = temps++;
                             timer= setInterval("heure()", 1000);
			}

Ça ressemble à une boucle infini avec une nocivité exponentielle !

Pour le problème rencontré, je crois que c'est un peu compliqué à expliquer, mais en gros, lorsqu'on fait un setInterval, on lance un nouveau contexte d'exécution totalement indépendant sur lequel on ne peut pas agir autrement qu'avec clearInterval.
Ainsi toute référence externe à la fonction utilisée se voit alors affectée au contexte du setInterval et ne peux plus être modifié tant que le timer est en route.
La solution est donc proche de celle proposée par laurentg2003, mais sans le suicidaire setInterval qui s'appelle lui-même...

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<script type="text/javascript">
var temps = 0;
 
function heure(tmp)
{
    document.getElementById("temps").value=temps;
    temps++;
}
function reset()
{
    clearInterval(timer);
    temps=0;
    timer = setInterval(function() { heure(); } ,1000);
}
 
var timer = setInterval(function() { heure(); } ,1000);
</script>
</head>
<body>
<input type="text" id="temps"/>
<input type="button" value="reset" onclick="reset();"/>
</body>
</html>

**laurentg2003** · 02/04/2011, 01h29

Bien vu

je n'ai pas l'habitude de ce genre de code
j'ai une classe spéciale pour ce genre de chose donc je ne reflechie plus a ce genre de probleme.

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
Object.prototype.onEnterFrame=function(){
 
if(undefined!=arguments[0]){            
Function=arguments[0];}
if(undefined!=arguments[1]){            
obj=arguments[1];}
if(undefined!=arguments[2]){            
duration=arguments[2];}
if(undefined!=arguments[3]){            
iterator=arguments[3];}
if(undefined!=arguments[4]){            
start=arguments[4];}
if(undefined!=arguments[5]){            
end=arguments[5];}
 
 
 
if(Function=="loadImage"){
 
 
 
load=function(){
 
 
obj.maMethode(start,end);
 
};
 
this.timer=setInterval("load()",duration);
}
 
 
}
 
function monObjet(){
 
 
this.maMethode=function(){
i=arguments[0];
 
if(i<arguments[1]){
var sChargeImg="";
sChargeImg+="oImg"+i+"= new Image();";
sChargeImg+="oImg"+i+".src=\""+url+""\";clearInterval(this.timer);";
 
sChargeImg+="oNewImage"+i+"=document.createElement(\"img\");";	
sChargeImg+="oNewImage"+i+".setAttribute(\"src\",oImg"+i+".src);";
sChargeImg+="oNewImage"+i+".setAttribute(\"width\",100);";
sChargeImg+="oNewImage"+i+".setAttribute(\"height\",140);";
sChargeImg+="oNewImage"+i+".setAttribute(\"id\",\"idimage"+i+"\");";
sChargeImg+="oId"+i+"=document.getElementById(\"idimage"+i+"\");";
sChargeImg+="oId"+i+".parentNode.replaceChild(oNewImage"+i+",oId"+i+".parentNode.firstChild);";
 
sChargeImg+="this.onEnterFrame(\"loadImage\",this,100,0,"+(i+1)+",arguments[1]);";
eval(sChargeImg);
}
else
{
clearInterval(this.timer);
}
 
}
 
 
 
 
 
}
 
var oObject=new monObjet();
    oObject.maMethode(0,100);

ici c'est pour précharger des images et les afficher à la place d'un snake gif
et encore la méthode onEnterFrame peut etre rendu totalement générique et on peut donc "passer" des parametres au setInterval
d'ailleurs toute optimisation de ce code est la bien venue