[javascript]compte à rebours

[naholyr]

Allons allons, si tu as su comment faire un compte à rebours en utilisant les dates, tu sauras bien le faire en utilisant une durée en secondes

Un petit exemple :

Code :

var monLayer = document.getElementById('affichageCompteARebours');

function afficherCompteARebours(dureeRestante) {
  monLayer.innerHTML = dureeRestante + " secondes...";
}

function compteARebours(dureeRestante, actionFinale) {
  afficherCompteARebours(dureeRestante)
  if (dureeRestante == 0) {
    actionFinale();
  }
  else {
    setTimeout("compteARebours(" + (dureeRestante-1) + ")", 1000);
  }
}

compteARebours(<?php echo $dureeEnSecondes; ?>, function(){ alert('fini !') });

On peut affiner le code pour palier aux éventuels retard pris par la fonction setTimeout (en notant la date de début au moment du démarrage du chrono, puis en vérifiant à chaque fois par rapport à la date actuelle au lieu de simplement se baser sur "dureeRestante", ce sera valide puisqu'on reste dans le référentiel du tiers pour les deux dates), voire utiliser setInterval (bien plus indiqué ici, mais moins bien supporté en général quoique ce n'est plus vrai aujourd'hui).
Ceci devrait fonctionner, bien sûr tu auras toujours des écarts puisque PHP va générer une durée sans tenir compte du temps que la page va mettre à parvenir jusqu'au visiteur. Bien souvent ce sera négligeable, mais en cas d'embouteillage si ta page met 4 secondes à parvenir au visiteur, il aura autant de décalage par rapport à la réalité. C'est de toute façon inévitable : tu pourrais aussi avec un peu d'Ajax aller te resynchroniser sur le serveur à intervalles réguliers, mais ça surchargerait ton serveur de requêtes et finirait probablement par avoir l'effet inverse en cas de forte affluence, donc autant accepter ces erreurs minimes en en étant conscient.

Idéalement tu devrais encapsuler ça dans une calsse CompteARebours afin d'avoir un code plus propre, et pouvoir faire des initialisations de ce genre

Code :

var chrono = new CompteARebours(duree);
chrono.layer = 'affichageCompteARebours';
chrono.start();