[jQuery] Compte à rebours pas stable.

Par Amelovitch, il y a 12 ans

Javascript

Bonjour,

J'ai un problème avec un compte à rebours que j'ai créé en jQuery.
Il décompte trois secondes pendant lesquelles la page s'assombrit, puis elle revient normal. Je déclenche ce compte à rebours avec un bouton.

Mon problème vient du fait que lorsque je clique une première fois sur le bouton, il me décompte bien 3 réelles secondes. Si je me sers encore du bouton, le compte à rebours est de plus en plus rapide et part en vrille.

Voici mon code (très inspiré du tuto sur le compte à rebours jQuery justement) :

var sec = 3;
function initSec() {sec=3;}
function countdown() {
    setTimeout(countdown, 1000);
    $("#countdown").html(sec);
    sec--;
    if(sec<0) {
        sec = 0;
        $("#filtre, #countdown").attr("style","display: none;");
    } 
    clearTimeout(countdown);
}
$("#chrono").click(function() {
    initSec();
    $("#filtre, #countdown").attr("style","display: block;");
    countdown();
});

A savoir que #filtre et #countdown ne me servent qu'à afficher le décompte, je n'ai pas de problème là-dessus.
Est-ce que quelqu'un saurait me dire comment "stabiliser" les 3 secondes ?

Merci d'avance

2 réponses

Chokkan Web, il y a 12 ans

Salut,

Essaie ça

var sec = 3;

function initSec() {sec=3;}

function countdown() {
    var timeout = setTimeout(countdown, 1000);
    $("#countdown").html(sec);
    sec--;
    if(sec<0) {
        sec = 0;
        $("#filtre, #countdown").attr("style","display: none;");
        clearTimeout(timeout);
    }    
}

$("#chrono").click(function() {
    initSec();
    $("#filtre, #countdown").attr("style","display: block;");
    countdown();
});

Bisous

Amelovitch, il y a 12 ans

Non ça ne fonctionne pas.
Le décompte reste bloqué sur "3" lorsque je passe le setTimeout dans ta variable.
De toute façon j'ai l'impression que le clearTimeout, même s'il apparaît théoriquement utile pour faire un reset de compte à rebours, ne change pas grand chose dans mon cas.
J'ai essayé avec et sans et le comportement est le même.

EDIT : J'ai finalement trouvé tout seul la solution, qui reste très barbare :

function countdown() {
            $("#filtre, #countdown").attr("style","display: block;");
            setTimeout(function(){$("#countdown").html(3)}, 0);
            setTimeout(function(){$("#countdown").html(2)}, 1000);
            setTimeout(function(){$("#countdown").html(1)}, 2000);
            setTimeout(function() {$("#filtre, #countdown").attr("style","display: none;")},3000);
        }

Au moins je suis sur d'afficher seconde par seconde le décompte, qui reste stable cette fois.