Comment rendre mon compteur précis ?

[viveleltsi]

Pour m'amuser j'ai fait ce petit script mais malheureusement après l'avoir tester je remarque qu'il est imprécis. Il prends du retard. Après quelques minutes il y a des dizaines de secondes de différence.

Alors j'ai fait une correction du temps d'execution du script (qui prends entre 1 et 5 ms) mais même avec cela, le retard est toujours là.

Auriez-vous une idée?

(C'est un compteur à rebours si jamais)

<script type="text/javascript">
	function chrono2()	//Fonction qui prends les heures, minutes, secondes, etc et décrémente le tout. puis rechange la valeur dans les <span> .
		{
		clearTimeout(timer2);
		var demain=new Date();	//On prends l'heure en ms du début
		var deb = demain.getTime();
		//On récupère les valeurs des jours, heures, etc
		var jour = document.getElementById("jour").innerHTML;
		var heure = document.getElementById("heure").innerHTML;
		var minute = document.getElementById("minute").innerHTML;
		var seconde = document.getElementById("seconde").innerHTML;
		//On décrémente et on arrange si on doit.
		seconde--;
		if(seconde <0)
			{
			seconde = 59;
			minute--;
			if(minute<0)
				{
				minute=59;
				heure--;
				if(heure<0)
					{
					heure=23;
					jour--;
					}
				}
			}
		//On change les valeurs dans les <span>
		document.getElementById("jour").innerHTML = jour;
		document.getElementById("heure").innerHTML = heure;
		document.getElementById("minute").innerHTML = minute;
		document.getElementById("seconde").innerHTML = seconde;
		var demain=new Date();
		var fin = demain.getTime();	//On reprends l'heure de fin en ms
		var tempfonc = 1000 -(fin - deb) ; // On fait 1000 ms moins le temps que le code à pris à s'executer
		var timer2 = setTimeout("chrono2()",tempfonc);	//On refait la fonction au bout de 1000 ms avec la correction calculé plus haut 
		}
</script>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<center><div style="zindex:-2"><img src="dan.jpg"/></div><center>
<?php
$officiel = mktime(11, 50, 0, 8, 7, 2009);	//Définition de la date de retour
$tempsofficiel = $officiel - time();		//Calcul du temps restant par rapport à maintenant
$anne2 = floor($tempsofficiel/3600/24/30/12);	//Calcul du nombre d'année que ça fait
$mois2 = floor(($tempsofficiel-($anne2*3600*24*30*12))/3600/24/30);	//Calcul du nombre de mois et pareil pour la suite...
$jour2 = floor(($tempsofficiel-($anne2*3600*24*30*12)-($mois2*30*24*3600))/3600/24);
$heure2 = floor(($tempsofficiel-($anne2*3600*24*30*12)-($mois2*30*24*3600)-($jour2*24*3600))/3600);
$minute2 = floor(($tempsofficiel-($anne2*3600*24*30*12)-($mois2*30*24*3600)-($jour2*24*3600)-($heure2*3600))/60);
$seconde2 = floor(($tempsofficiel-($anne2*3600*24*30*12)-($mois2*30*24*3600)-($jour2*24*3600)-($heure2*3600)-($minute2*60)));


//Affichage de la phrase.
echo '<center><span style="font-size:30px;color:black;" ><strong>Elle reviendra dans <span id="annee">' . $anne2 .'</span> ans <span id="mois">'. $mois2 .'</span> mois <span id="jour">'.$jour2 .'</span> jours <span id="heure">'. $heure2 . '</span> heures <span id="minute">'. $minute2 .'</span> minutes et <span id="seconde">'. $seconde2 . '</span> secondes.</strong></span>' ;
?>
<script type="text/javascript">
chrono2();	//Execution du script pour décrémenter le compteur.
</script>

Merci d'avance =)

Modifié 12 Juillet 2009 par viveleltsi

[SStephane]

Je regarde ton code en diagonal, je me dit que ton soucis vient du fait que tu utilises 2 heures différentes : heure js = client, heure php = serveur.

Ton souci ne viendrait pas de là ?

Modifié 12 Juillet 2009 par SStephane

[viveleltsi]

Je regarde ton code en diagonal, je me dit que ton soucis vient du fait que tu utilises 2 heures différentes : heure js = client, heure php = serveur.

Ton souci ne viendrait pas de là ?

L'heure du client est utilisé juste pour faire une différence. Donc heure_fin - heure_début = Temps . Donc ça ne doit pas jouer, à moi que le client et le serveur n'ont pas des secondes semblable =P

Dans le php on calcul on temps par rapport à des dates, ce temps est ensuite afficher en différente unité (mois, jours, heures, minutes etc).

Le javascript est là pour temporisé une augmentation ou une diminution du compteur. Donc il n'y a pas de notions de date dedans =)

[captain_torche]

à moins que le client et le serveur n'ont pas des secondes semblables

Sauf si tu développes sur ton PC, ça sera toujours le cas

[viveleltsi]

Sauf si tu développes sur ton PC, ça sera toujours le cas

Ce que je voulais dire c'est que les secondes sur le pc étaient différentes de celle du serveur au niveau de leurs durées.

Genre une seconde qui dure 1,2 secondes du serveur donc en principe c'est les même, une seconde c'est une seconde.

Heu j'suis pas trop abstrait ?

[SStephane]

En regardant de plus près je vois pourquoi ce n'est pas précis, setTimeout à 1000 ne fera jamais exactement une seconde, et tu te sers du timer pour décrémenter, ça ne peux pas fonctionner.

Il te faut faire un diff entre 2 date, sur le client ou sur le serveur.

[viveleltsi]

En regardant de plus près je vois pourquoi ce n'est pas précis, setTimeout à 1000 ne fera jamais exactement une seconde, et tu te sers du timer pour décrémenter, ça ne peux pas fonctionner.

Il te faut faire un diff entre 2 date, sur le client ou sur le serveur.

Donc si je comprends bien je dois refaire le même cheminement en javascript qu'en php, donc une fonction qui fait la différence entre la date et la date de maintenant et qui actualise les variables puis la fonction s'appelle elle même à la fin. c'est bien cela?

[SStephane]

Tout à fait, car le timer javascript n'est pas fiable (pas plus que celui d'AS par ailleurs).

[viveleltsi]

C'est étonnant. ben merci de ton aide =)

[viveleltsi]

Voici le code que j'ai fait. Et effectivement c'est précis. J'ai suivis les conseils reçu et donc je dois refaire le calcul des dates en javascript.

Je recalcul le temps restant toute les 100 ms (si je ne mettais pas de timer le script se bloquait) voici donc le code. (Pour les prochains qui liraient ce post)

<body style="background-color:black;">
<script type="text/javascript">
	function decompteur()	//Fonction servant à faire un décompteur
		{
		var officiel = document.getElementById("officiel").innerHTML;	//Récupération de la date mise en php
		var date = new Date();	//Création de l'objet date
		var temps1 = date.getTime()/1000;	//Récupération du timestamp, le divisé par 1000 est pour avoir des secondes
		var temps2 = Math.floor(temps1);	//arrondissement du timestamp
		var tempsofficiel = officiel - temps2;		//Calcul du temps restant par rapport à maintenant
		var annee = Math.floor(tempsofficiel/3600/24/30/12);	//Calcul du nombre d'année que ça fait
		var mois = Math.floor((tempsofficiel-(annee*3600*24*30*12))/3600/24/30);	//Calcul du nombre de mois et pareil pour la suite...
		var jour = Math.floor((tempsofficiel-(annee*3600*24*30*12)-(mois*30*24*3600))/3600/24);
		var heure = Math.floor((tempsofficiel-(annee*3600*24*30*12)-(mois*30*24*3600)-(jour*24*3600))/3600);
		var minute = Math.floor((tempsofficiel-(annee*3600*24*30*12)-(mois*30*24*3600)-(jour*24*3600)-(heure*3600))/60);
		var seconde = Math.floor((tempsofficiel-(annee*3600*24*30*12)-(mois*30*24*3600)-(jour*24*3600)-(heure*3600)-(minute*60)));
		//affectation des données calculées.
		document.getElementById("annee").innerHTML = annee;
		document.getElementById("mois").innerHTML = mois;
		document.getElementById("jour").innerHTML = jour;
		document.getElementById("heure").innerHTML = heure;
		document.getElementById("minute").innerHTML = minute;
		document.getElementById("seconde").innerHTML = seconde;
		var timer2 = setTimeout("decompteur()",100);	//Relance de la fonction après 100 ms.
		}

</script>

<?php
$officiel = mktime(11, 50, 0, 8, 7, 2009);	//Définition de la date de retour
$tempsofficiel = $officiel - time();		//Calcul du temps restant par rapport à maintenant
$anne2 = floor($tempsofficiel/3600/24/30/12);	//Calcul du nombre d'année que ça fait
$mois2 = floor(($tempsofficiel-($anne2*3600*24*30*12))/3600/24/30);	//Calcul du nombre de mois et pareil pour la suite...
$jour2 = floor(($tempsofficiel-($anne2*3600*24*30*12)-($mois2*30*24*3600))/3600/24);
$heure2 = floor(($tempsofficiel-($anne2*3600*24*30*12)-($mois2*30*24*3600)-($jour2*24*3600))/3600);
$minute2 = floor(($tempsofficiel-($anne2*3600*24*30*12)-($mois2*30*24*3600)-($jour2*24*3600)-($heure2*3600))/60);
$seconde2 = floor(($tempsofficiel-($anne2*3600*24*30*12)-($mois2*30*24*3600)-($jour2*24*3600)-($heure2*3600)-($minute2*60)));


//Affichage de la phrase.
echo '<div id="officiel" style="display:none;">'.$officiel.'</div>';	//div non-affiché pour transferer la date.
echo '<br/><center><span style="font-size:30px;color:white;" ><strong>Elle reviendra dans <span id="annee">' . $anne2 .'</span> ans <span id="mois">'. $mois2 .'</span> mois <span id="jour">'.$jour2 .'</span> jours <span id="heure">'. $heure2 . '</span> heures <span id="minute">'. $minute2 .'</span> minutes et <span id="seconde">'. $seconde2 . '</span> secondes.</strong></span>' ;
?>
<script type="text/javascript">
decompteur();	//Execution du script pour décrémenter le compteur.
</script>
</body>