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

**Willpower** · 02/04/2011, 01h52

Envoyé par laurentg2003

Code :

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

Function=arguments[0];

hum

**nadox** · 02/04/2011, 02h57

@laurentg2003 : J'ai un doute sur la viabilité de ce code... Tu ne déclare jamais tes variables dans le scope ? j'ai juste fait un copier/coller pour tester, et ton code m'a donné deux erreurs... un double guillemet en trop, et la variable url qui n'existe pas...

Quel est l'intérêt de faire une classe qui n'encapsule pas ses attributs ?

Pour un exemple de timer, je pense qu'il suffit de demander à notre ami google...

Un tuto pour faire une vrai classe Timer :
http://www.dailycoding.com/Posts/obj...mer_class.aspx

Un script interessant pour aller (vraiment) plus loin :
http://jsfromhell.com/classes/timeline

**javatwister** · 02/04/2011, 07h36

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

**raphchar** · 02/04/2011, 09h20

Merci pour vos réponses
Nesmontou tu as tort le this n'y est pour rien.
En fait j'avais mis le champ d'affichage dans une form et c'est cela qui n'allais pas.
Donc mon problème est résolu, mais en quoi une form a-t-elle du pouvoir sur les variables de javascript?

**laurentg2003** · 02/04/2011, 09h52

Function=arguments[0]; donc Function=="loadImage" car il peut avoir plusieurs onEnterFrame (j'ai commencé par actionScript et ça se voit)
les guillements en trop c'est juste une erreur de copie quant à url c'est juste que je n'ai pas voulu mettre le vrai url et cette classe n'est pas une classe dans le sens poo du terme c'est même plutot du code procédural masqué c'est juste que ça me permet d'ajouter un serInterval facilement et quand j'aurais le temps j'en ferai une vrai classe
et je ne vois pas pourquoi je mettrai du code non viable
j'utilise massivement ce code dans une appli facebook avec des iframes (je supporte pas l'objet ajax )
je mettrai bien l'adresse mais c en cours de devellopement
quand tu parle de scope tu parle de la portée des variables de binding tu parle de quoi?
quant à tes tuto ,je ne programme pas comme ça c'est inutilement compliqué
justement je fais tout moi même pour apprendre...
EDIT @raphchar tu as raison this.temps ou temps c'est pareil this c'est l'objet gobal c'est window

@javatwister

On ne mord pas, on manifeste seulement notre tristesse face à des exposés de situations qui défient notre entendement binaire.

ça veut dire quoi ? c'est un forum ici si ce code a une erreur algorythmique ou autre tu ferais mieux de le dire clairement plutôt que de t'exprimer par petites phrases sibyllines tu te prend pour un oracle?

**Willpower** · 02/04/2011, 12h00

Envoyé par laurentg2003

Code :

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

Function=arguments[0];

donc Function=="loadImage" car il peut avoir plusieurs onEnterFrame (j'ai commencé par actionScript et ça se voit)

t'as déjà fait du javascript ? tu sais que "Function" est un mot clé ? tu peux le voir ici grâce à la mise en évidence (en bleu) par le forum ainsi que dans ton éditeur de javascript (normalement).

**javatwister** · 02/04/2011, 12h07

enchanté moi aussi Laurentg2003

en fait, ça s'appelle une "signature" (depuis 8 ans que je m'en passais, il fallait bien que je me mette à la page un jour), tu sais, le genre de phrases comme "tous des cons sauf Einstein" ou un truc comme ça;

après, j'aime bien mon côté oracle aussi

**laurentg2003** · 02/04/2011, 13h39

Mince lol j'ai cru que c'etait un post lol Désolé

cela dit oracle est une bonne base de donnée mdr
toute mes excuses !
@ Willpower je te rassure ,je n'ai jamais fait de javascript et je n'en fais toujours pas
new Function est un mot clé comme fonction mais javaScript est me semble t'il sensible à la casse
donc Function n'est pas un mot cléf et a supposer que ce soit un mot cléf
quand même alert(Function); renvoit bien le nom de ma fonction d'ou un test d'egalité à true et je pense que dans un tel cas l'interperteur javaScript m'aurait planté une belle erreur c'est donc le bbCode qui lui est insensible à la casse!

Certe je te concede que ça prete à confusion et donc je vais mettre fonction
j'ai une classe Event aussi et pas event...
EDIT alert(typeof(Function)); donne bien string ce qui fait toujours plaisir

**nadox** · 02/04/2011, 13h49

@laurentg2003
Désolé si je t'ai paru trop brusque dans mes commentaires. Tu disais que toute optimisation est la bienvenue. Pour moi la première "optimisation" est de faire un code lisible et propre, qui ne risque pas d'avoir un comportement inattendu...

Envoyé par laurentg2003

cette classe n'est pas une classe dans le sens poo du terme c'est même plutot du code procédural masqué c'est juste que ça me permet d'ajouter un serInterval facilement et quand j'aurais le temps j'en ferai une vrai classe

Donc c'est une classe ou pas ?

Surtout que les classes n'existe pas réellement dans javascript... L'héritage par prototype, ça te dit quelque chose ? (d'ailleurs étendre le prototype d'Object c'est plutôt bourrin comme façon de faire)

Envoyé par laurentg2003

et je ne vois pas pourquoi je mettrai du code non viable

Moi non plus, pourtant c'est le cas.

Envoyé par laurentg2003

quand tu parle de scope tu parle de la portée des variables de binding tu parle de quoi?

Je parle juste du mot-clef "var". Mais tu n'as pas l'air de connaître les mot-clef....
Rassure-moi, tu sais tout de même que les variables sont déclarées avec le mot-clef "var" ? Que la portée de ce type de déclaration est la fonction dans laquelle elle est faite(scope ou contexte) ?
Et quand tu ne le met pas, tu en fait une variable plus ou moins "globale" --> elle n'existe pas dans le contexte de la fonction, donc l'interpréteur cherche dans le contexte de l'objet appelant, et ainsi de suite, jusqu'à window...

Envoyé par laurentg2003

quant à tes tuto ,je ne programme pas comme ça c'est inutilement compliqué
justement je fais tout moi même pour apprendre...

Ben justement, avant de tout faire soit même il faut peut-être se demander pourquoi les autres le font de telle ou telle façon ? Tu crois vraiment que c'est seulement pour le faire d'une façon compliqué ? Le tuto(premier lien) est vraiment simple pourtant.
Le deuxième lien n'est pas un tuto et montre un code beaucoup plus compliqué à lire... Là je te l'accorde, c'est compliqué ! Mais aussi plus complet et intéressant pour quelqu'un qui dit avoir commencé avec action script, non ?

Amicalement

**laurentg2003** · 02/04/2011, 14h14

Globalement tu as raison je sais tout ça mais j'avoue n'etre pas rigoureux sur la portée des variables et je persiste Function n'est pas un mot cléf voir post au dessus
Mais je vais réecrire tout ça proprement avec des propriétées privés var et public this pour les "classes" j'utilise ce type de code if(typeof MaClasse.prototype.init=="undefined"){

MaClasse.prototype.getIdAndTag=function(identity){ etc
Mais tu as raison les variables globales ralentissent le script donc
Je fais du javaScript depuis 1 ans car avant je considérais que c'etait de la M.... et je pense à présent le contraire
et action script c'etait juste ecrire un petit lecteur....mais il y avait OnEnterFrame...
Et ce code fonctionne en depit de mes variable globales je ne vois pas de grosses erreurs de logiques cela dit je vais l'optimiser...
Eval est surement gourmand mais comment faire autrement pour créer des variables ou des objets dynamiques et avec une boucle fort tout plante... c'est bcp plus rapide qu'un setInterval même à 100 ....
mais tu m'as fait reflechir j'ai de bonne idées je crois mais c'est encore trop bon ça marche terminée et ça fait un code de M...
je vais récrire tout ça
Merci pour tes conseils

**nadox** · 02/04/2011, 15h51

Je ne suis pas sûr d'avoir compris ce qui te pose soucis pour définir des objets dynamiques. Je pense que tu devrais te pencher un peu plus sur la conception du langage lui-même et son aspect "objet" qui est très différent des autres langages "objet". Javascript utilise lui l'héritage par prototype au lieu du concept de classes.
Ainsi, il est plutôt dangereux de penser que le mot-clef new "instancie" un objet. Il ne fait que créer un autre objet héritant du prototype de l'objet modèle. Et on peut, par exemple, modifier le prototype des objets déjà créés afin de tous leur ajouter des propriétés et méthodes. Alors qu'en java ou en c++, par exemple, on ne peut pas toucher à une classe après l'instanciation.
L'héritage par prototype permet donc un héritage dynamique.

Je peux te conseiller de lire, par exemple, ce petit article, qui montre bien ce que cela implique comme distinction.
http://www.mti.epita.fr/blogs/2010/0...en-javascript/
Si tu veux aller plus loin, tu devrais aussi lire ce qui se trouve ici :
http://javascript.crockford.com/

Bref, le langage Javascript nécessite beaucoup de rigueur et une bonne compréhension de son fonctionnement pour faire un code "propre" et efficace. Même si on peux faire un peu ce qu'on veut, et que ça fonctionnera même si on ne maîtrise pas les concepts qu'il implémente.

Je ne suis pas sûr d'avoir compris ce que ton code cherche à faire, mais il y a sûrement une façon de le faire autrement qu'avec l'utilisation d'eval et sans étendre le prototype de Object.
Ton utilisation de variable sans le mot-clé "var" n'implique pas seulement de mauvaises performances, mais surtout un mauvais contrôle sur la portée de celles-ci. Tu ne peux pas être sûr que la variable ne sera pas définie/utilisée ailleurs. Et "je n'utilise que du code que j'écrit moi-même" ne te permet pas d'affirmer que tu ne l'utilise pas ailleurs dans ton code, car aucun programmeur ne peut se souvenir de tout ce qu'il a écrit en permanence...C'est la raison pour laquelle les syntaxes permissives qui ne passe pas par une étape de compilation nécessitent une rigueur et une compréhension supplémentaire.

En tous cas, n'hésite pas si tu veux un coup de main pour comprendre une notion ou réécrire ta "classe"

**NoSmoking** · 02/04/2011, 16h05

Envoyé par laurentg2003

Globalement tu as raison je sais tout ça mais j'avoue n'etre pas rigoureux sur la portée des variables et je persiste Function n'est pas un mot cléf...

oui mais c'est un objet global, testes

Code :

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

1
2
3
4
Function = 'Bonjour!';
var multiplie = new Function("x", "y", "return x * y");
var resultat = multiplie(7, 6);
alert( resultat);

ça plante

**Willpower** · 02/04/2011, 16h11

Tu peux écraser toutes les fonctions et objets par défauts. Ça permet de définir une fonction de remplacement = surcharge.

Mais utiliser ces mots-clefs comme variables pour qqe chose qui n'a rien à voir est totalement déconseillé pour des raisons évidentes.

Et oui Function!=function

Function étant en qqes sortes le constructeur de fonction.

**laurentg2003** · 02/04/2011, 17h40

Bon Merci pour tous vos conseils
comme quoi on a beau avoir des livres sur JS comme livres de chevet
javaScript est assez mystérieux et tout n'est pas ds un livre...
on est sur de certains trucs et c'est faux

@ NoSmoking et Willpower
je pensais que la surcharge en js n'etait pas possible elle l'est donc sur les objets par defaut les fonctions etant des objets si je ne dis pas de bétises
donc vous avez raison
heuresement que new function ne s'utilise plus donc....
mais avec Event j'avoue avoir eu des problemes.... donc à changer et merci pour l'info
EDIT notePad n'a pas mis Function en bleu ....

@ nadox
je vais etudier tes liens et merci pour ce cours
en fait mon code cherche à précharger des images en mémoires
1200 de 140 sur 100px
ensuite tu remplace dans le tableau html l'image gif qui tourne par une image créer par createElement
mais c'est 9 images par 9 images ça fait donc 120 "galeries"
donc à chaque fois c'est 9 objets de créer et imGx.src affecter dans maNouVelle image créer par createElement et donc c'est 18 objets de créer
d'ailleurs IE pose de gros soucis au lieu de télécharger la page l'iframe les images il fait le contraire donc onload et complete sont a la rue surtout pr revenir en arriere car vu qu'elles sont déja chargé pour Ie fini les gestionnaires d'evenement c'est ce que j'en ai deduis et je vais pas désactiver le cache
donc tout ça est trés rapide et il y aussi un gif pour télécharger l'iframe
avec ces objets dynamiques j'utilise donc des eval
car les objets c'est img0 img2 img3 etc
l'application es chargé une fois et c'est tout
en php c'est plus simple de faire du code dynamique
sur d'autres script qui tourne en arriere plan
je peux détruire les objets aprés leur utilisation delete monobjet;
c'est a dire le pointeur en fait si j'ai bien compris
là je pense que je ne peux ça doit affecter le cache non?
enfin ce code fait ça donc
et merci pour tes conseils et je manquerai pas de te montrer ma nouvelle classe