11486 sujets

JavaScript, DOM et API Web HTML5

Bonsoir à tous,

Voilà dans un projet après la validation d'une signature sur un canvas, j'initie une instance d'une classe Decompte (elle met en place un compte à rebours de 20 mn). Le problème est que si jamais l'utilisateur décide avant la fin de se rebours, de faire une autre réservation (en validant sa signature sur un nouveau canvas) un nouveau rebours remplace le précédent : Le problème est qu'on aperçois par intermittence l'ancien rebours, bien que je lui ai appliqué un clearInterval...???!!et ce phénomène est inconstant : le dédoublement peut apparaitre au bout de la 5 eme instanciation tout comme cela peut arriver au bout de 2 instance... dans les premières minutes ou seulement au bout de x minutes Smiley confus

ici l'instanciation de mon decompte

this.enregistrer.addEventListener("click", function(){ /*listener sur bouton confirmer la reservation*/           
            if(this.compteur !== 0){                
                this.veloDisp = this.veloDisp - 1;
                document.getElementById("nbreVelos").textContent = this.veloDisp + " velos disponibles";
                this.canvas.style.display = "none";
                this.enregistrer.style.display = "none";
                document.querySelector("form").style.display = "none";
                this.compteur = 0;                
                this.decompte.reset();/*applique le clearInterval*/
                this.decompte.creation();/*creation du compteur avec adresse de reservation, nom et prenom de l'utilisateur*/
                this.decompte.start();/*lance le decompte*/                
            }
              
        }.bind(this));

et là ma classe Decompte

 [code=javascript]creation (){ /* mise en place 1ere ligne avec adresse + nom */
        var infos = document.getElementById("infos");
        infos.innerHTML = "";
        infos.style.fontSize = "large";
        infos.textContent = "Vélo réservé à la station " + this.adr + " par " + document.getElementById(this.prenomId).value + " " + document.getElementById(this.nomId).value;
        sessionStorage.setItem("inforesa", infos.textContent);/*enregistrement en storage de la ligne infos et de l'adresse */
        sessionStorage.setItem("adresseInitiale", this.adr);
        
    }
    initDecompte(){        
        this.secondes = this.secondes - 1;        
        this.rebours.textContent = "Temps restant : " + this.minutes + " min : " + this.secondes + "s";
        this.rebours.style.fontSize = "x-large";
        sessionStorage.setItem("reboursMinutes", this.minutes);/*enregistrement en storage des minutes et secondes */
        sessionStorage.setItem("reboursSecondes", this.secondes);
        if (this.secondes === 0){
            this.minutes = this.minutes - 1;
            this.secondes = 60;            
        }
        
        else if ((this.minutes === -1) && (this.secondes ===59)){/* fin du délai */
            this.reset();
            sessionStorage.removeItem("adresseInitiale");
            this.rebours.style.color = "white";            /*affichage du message de depassement de délai*/
            this.rebours.style.fontSize = "x-large";
            this.rebours.textContent = "Délais dépassé";           
        }
    }
    
    start(){         
        this.intervalId = setInterval(this.initDecompte.bind(this), 1000);/*interval d'1 seconde entre chaque execution*/
        
    }
    
    reset(){
        clearInterval(this.intervalId);/*arrête le decompte*/
    }


Où ai je fauté?? Smiley biggol
Bon finalement j'ai écarté la méthode "classe", et depuis mon chrono ne bug plus... Smiley biggrin