Compte à rebours Javascript

[tesco]

Bonjour à tous,

En faite j'ai un soucis avec un compte à rebours en javascript, il fonctionne parfaitement mais le problème c'est quand la page se charge le compte à rebours lui se charge avec 1seconde de retard ce qui à pour effet de décalé la page lorsque ce fameux compte à rebours apparait.

J'ai farfouiné sur le web, soit j'ai le même problème avec d'autres soit le décompte ne se fait pas automatiquement.
A oui je précise que le compte à rebour défile sans rafraichissement de la page. En faite je voudrais qu'il décompte le temps en temps réel mais qu'il s'affiche en meme temps que la page et c'est la ou je bloque.

Voici mon code:

<script>
var timeleft = <?php echo $temps_restant; ?>;//création de la variable de temps restant
function Rebour()
{
timeleft--;//on retire une secondes
var j = Math.floor (timeleft / 86400);
var h = Math.floor ((timeleft % 86400) / 3600);
var m = Math.floor ((timeleft % 3600) / 60);//on compte le nombre de minutes restantes
var s = timeleft % 60;//on compte le nombre de secondes restantes
document.getElementById("temps").innerHTML ="<font color=\"white\">Arrivage dans:</b> "+ h + " h " + m + "</font>";//on affiche le tout
if (timeleft<0)
var i=0;//action si le chrono est à 0
}
setInterval(Rebour, 1000);//on lance le calcul et l'affichage du chrono toute les 1000 ms

</script>

<td><div id="temps"></div></td>

[Viciousity]

Je pense que c'est simplement du au temps de chargement de la page.
Sans m'avancer plus rapidement, mais j'ai déjà eu ce soucis pour d'autres scripts.

En fait quand tu commences a charger la page, PHP stocke directement ta variable de temps (coté serveur).
Ensuite il faut le temps que ta page charge (Javascript, CSS, images...). Vu que ce chargement varie selon la taille des de ces différents éléments, il se peut que quand il se lance, il aie un peu de retard.

En solution, tu peux par exemple essayer de mettre ton javascript au dessus de ta balise HTML.
Sinon c'est que plutôt de calculer le temps restant en PHP, le calculer dans ton javascript :
- PHP = Date de fin du compte a rebours.
- JS = Calcul du temps a partir du moment ou il est chargé jusqu'à la la date de fin du compte a rebours, puis décompte.

Si tu ne comprend pas quelque chose dis le moi (je suis pas toujours clair :S)

[php_addict]

Je pense que c'est simplement du au temps de chargement de la page.

non c'est la valeur dans setInterval(Rebour, 1000) qui fait declencher la function dans 1000ms et non pas de suite d'où le retard d'affichage, si tu m'était 4000 il y aura 4sec avant l'affichage

commence par remplir ta <div id="temps"></div> (côté serveur/php ou client/JS peut importe) et cela t'affichera la valeur du compte à rebour, et apres JS fais le reste.

faudrait tester mais si tu laisse le script tourner 1 ou 2 heure il est possible que ton chrono se décale et là tu peut rien y faire à part le mettre à jour en ajax, mais c'est vraiment se prendre la tête pour rien...

[Hideaki]

Si tu ne souhaites pas avoir de retard ou le limité à une seconde, ne fonctionne pas explicitement en mode compte à rebours mais en date de fin.
Phase d'initialisation

var date_du_serveur_en_milliseconde = //Ton php

var date_du_rebours_restant_en_milliseconde =  //Ton php

var delta_entre_serveur_et_la_machine = new Date().getTime() - date_serveur_en_milliseconde;

// Pour ne pas être décalé

date_du_rebours_restant_en_milliseconde = date_du_rebours_restant_en_milliseconde - delta_entre_serveur_et_la_machine;

Dans la fonction Rebours

var seconde_restante = parseInt((date_du_rebours_restant_en_milliseconde - new Date().getTime())/1000);

Je n'ai pas testé mais le principe est là, tu devrais plus n'avoir de décalage.
Une des erreurs est de penser que tous le monde est correctement synchronisé.

[Ter Rowan]

je rejoins la proposition de php_addict

le problème me semble t il est visuel :

pendant une seconde on ne voit rien puis s'affiche la phrase "Arrivage dans XXX" qui bouscule tout

Il suffit d'écrire la phrase avec la valeur qui va bien et on résout le pb d'affichage

[tesco]

Merci, j'ai résolu le problème par contre Hideaki, je ne souhaitais pas me basé sur l'heure du serveur car je stock la durée dans ma BDD, mais comme ton code à l'air plus fiable, je vais le testé.

Merci encore

[Hideaki]

Pas de soucis, par contre une durée à toujours basé sur une date et heure de référence, je prends un exemple si tu lances une construction et qu'elle dure 1h, ta construction se finira toujours à la date du lancement + la durée, donc tu pourras toujours mettre si besoin dans ton code php, un truc comme cela new Date()->getTime() + durée pour date_du_rebours_restant_en_milliseconde.

[tesco]

En faite, mes joueurs changent de ville toutes les 22heures, je stock 22heures dans ma BDD et lance une tache cron pour faire le décompte des 22heures.

La méthode que tu dis est mieux ?

[Hideaki]

Tu me perturbes, si c'est toutes les 22h pour stocker cette valeur dans ta bdd, à moins qu'elle puisse varié ou que tu la décrémentes chaque heure par exemple, stocker la date et l'heure du prochain changement de ville peut-être intéressant si, par exemple ton serveur s'arrête 2 ou 3 heures, comment ton système se comportera ? Et tu auras ta réponse

[tesco]

je stock 22heures (xxxx minutes) dans ma BDD, toutes les minutes je lance la tache cron ou je retire une minute. Si le serveur s'arrete du coup le système sera "en pause". En 3 ans ou j'utilise des serveurs dédié chaque panne était de ma faute donc on va dire que c'est rare

Mais même avec ta méthode si le serveur s’arrête le système est en pause