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

Version imprimable

01/04/2020, 03h58
benbang

3 pièce(s) jointe(s)

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

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 ;)

Pièce jointe 551521
Pièce jointe 551524
Pièce jointe 551525
01/04/2020, 07h53
NoSmoking

Bonjour et bienvenue sur DVP.

Peu de personnes vont se donner la peine de recopier ton code pour éventuellement tester.

Il est préférable de mettre ton code directement dans la discussion entre balise [CODE][/CODE].

Aide sur l'utilisation des boutons.

Bonjour, merci pour l'accueil.

Oui en effet personne ne prendra la peine de recopier tout ce code... Merci pour l'info.

Je transmet le code, même si je pense avoir trouvé le problème en remplaçant setInterval(this.secondesCounting, 1000); par une fonction fléchée setInterval(() => this.secondesCounting(), 1000);.

Code:

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

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
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();

02/04/2020, 09h01
NoSmoking
Citation:

Je transmet le code, même si je pense avoir trouvé le problème en remplaçant setInterval(this.secondesCounting, 1000); par une fonction fléchée setInterval(() => this.secondesCounting(), 1000);.

C'est bien tu as mis le doigt sur le problème que te conférait l'utilisation du this dans ce cas.

De ce que je vois il te reste un soucis au niveau de cette ligne

Code:

clearInterval();

tu « cleares » quoi, attendu que tu n'as pas gardé de référence sur le timer, il te faut en déclarer un pour ta classe
Code:

1 2 3 4 5 constructor() { this.counter = document.getElementById("counter"); // ... this.iTimer = null; }
... le lancer avec :
Code:

1 2 3 4 5 running() { this.secondesCounting(); //setInterval(this.secondesCounting, 1000); this.iTimer = setInterval(() => this.secondesCounting(), 1000); }
... et le supprimer via un :
Code:

1 2 //clearInterval(); clearInterval(this.iTimer);
sinon le reste m'a l'air correct.
02/04/2020, 16h43
benbang

Je comprend tout à fait l'idée de déclarer.
Cependant j'ai l'impression que ça fonctionne même sans le déclarer.

Comment vérifier que le clearInterval() fonctionne ou non ?

Au delà de ce problème réglé, j'en rencontre un autre :

Lorsque le timer fonctionne et que je clique une nouvelle fois sur le bouton (qui lance le timer), le timer décrémente bizarrement (plus rapidement et de façon saccadée).
Comment pourrais-je régler ça, afin qu'il redémarre de la même façon qu'au 1er clic sur le bouton ?
02/04/2020, 18h16
NoSmoking
Citation:

Comment vérifier que le clearInterval() fonctionne ou non ?

il te suffit de mettre un console.log("secondesCounting", this.secondes) dans ta fonction secondesCounting et de jeter un coup d'oeil à la console, F12, pour te rendre compte que la fonction est toujours appelée.

Citation:

Lorsque le timer fonctionne et que je clique une nouvelle fois sur le bouton (qui lance le timer), le timer décrémente bizarrement (plus rapidement et de façon saccadée).

A chaque appui sur le bouton tu déclenches un timer qui se cumule avec ceux en cours, pareil un coup d'oeil dans la console devrait te le mettre en évidence.
La parade est de « clearer » le timer en cours avant la relance.
Code:

1 2 3 4 5 running() { clearInterval(this.iTimer); this.secondesCounting(); this.iTimer = setInterval(() => this.secondesCounting(), 1000); }
03/04/2020, 17h55
benbang

Merci !
En effet, là était le problème, merci pour tout :)