Le compte à rebours ne décrémente pas automatiquement

[ben06]

Salut tout le monde !

Je souhaite créer un compte à rebours mais je bloque un peu...
Je l'ai d'abord créé simplement (photo 3) puis j'ai voulu transformer le code en POO (photos 1 & 2).
Là est le problème, tout à l'air de fonctionner sauf la décrémentation automatique chaque seconde (donc setInterval).
Avez-vous des idées ?

Merci d'avance

Photo 1

Capture d’écran 2020-04-01 à 03.19.49.png (252.29 Kio) Vu 10231 fois

Photo 2

Capture d’écran 2020-04-01 à 03.20.00.png (178.69 Kio) Vu 10231 fois

Photo 3

Capture d’écran 2020-04-01 à 03.23.04.png (237.57 Kio) Vu 10231 fois

[webmaster]

Bonjour,

Difficile de répondre sans voir l'exécution et ajouter des log dans la console
J'aimerai bien avoir le code source complet pour pouvoir regarder.

[ben06]

Oui en effet, j'aurais dû donner le code et non des screenshots...

Je pense avoir résolu le problème : j'ai remplacé "setInterval(this.secondesCounting, 1000);" par une fonction fléchée "setInterval(() => this.secondesCounting(), 1000);"

Code : Tout sélectionner

	<button id="button">Run</button><br><br>
	<div id="counter"></div><br><br>
	<button id="remove">Remove</button>

Code : Tout sélectionner

class Timer {

    constructor() {
        this.counter = document.getElementById("counter");
        this.button = document.getElementById("button");
        this.buttonRemove = document.getElementById("remove");
        this.secondes = 13;
        this.minutes = 0;
        this.current_secs;
        this.current_mins;
        this.buttonClick();
        this.removeClick();
        this.ifstorage();
    }

    ifstorage() {
        if (sessionStorage.getItem("Secondes")) {
            this.secondes = sessionStorage.getItem("Secondes");
            this.minutes = sessionStorage.getItem("Minutes");
            this.running();
        }
    }

    removeStorage() {
        sessionStorage.clear();
    }

    storage() {
        sessionStorage.setItem("Secondes", this.current_secs);
        sessionStorage.setItem("Minutes", this.current_mins);
    }

    buttonClick() {
        this.button.addEventListener("click", () => {
            // secondesCounting();
            this.running();
        });
    }

    removeClick() {
        this.buttonRemove.addEventListener("click", () => {
            this.removeStorage();
        });
    }

    secondesCounting() {
        if (this.secondes > 0) {
            this.secondes--;
            this.current_secs = this.secondes;
            this.current_mins = this.minutes;
            this.addTextContent()
            this.storage();
        } else if (this.secondes == 0 && this.minutes > 0) {
            this.secondes = 59;
            this.minutes--;
            this.current_secs = this.secondes;
            this.current_mins = this.minutes;
            this.addTextContent();
            this.storage();
         } else if (this.secondes == 0 && this.minutes == 0) {
            clearInterval();
            sessionStorage.clear();
            this.counter.textContent = "fin";
        }
    }

    running() {
        this.secondesCounting();
        setInterval(this.secondesCounting, 1000);
    }

    addTextContent() {
        this.counter.textContent = this.current_mins + ":" + this.current_secs;
    }
}

let countdown = new Timer();

[webmaster]

Oui, c'est la solution en effet

Je vois qu'il y a de la maitrise avec l'écriture de fonction flechée
bravo

[ben06]

Salut webmaster,

Merci pour ta réponse

Je rencontre maintenant un nouveau problème :

Lorsque le timer fonctionne et que je clique une nouvelle fois sur le bouton, le timer décrémente bizarrement (plus rapidement et de façon saccadée).
Comment pourrais-je régler ça ?

Merci d'avance

[webmaster]

Je suppose que le 1er timer n'est pas détruit à la fin du décompte
Au lancement du second, les deux tournent en même temps

Il faut tuer le 1er avec clearTimeout()
https://www.toutjavascript.com/referenc ... imeout.php

[ben06]

En effet, le problème était bien là.
C'était assez évident d'ailleurs, merci !!!