Discussion :

[benbang]

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

[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.

[benbang]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[NoSmoking]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

... le lancer avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
running() {
  this.secondesCounting();
  //setInterval(this.secondesCounting, 1000);
  this.iTimer = setInterval(() => this.secondesCounting(), 1000);
}

... et le supprimer via un :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
//clearInterval();
clearInterval(this.iTimer);

sinon le reste m'a l'air correct.

[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 ?

[NoSmoking]

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.

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
running() {
  clearInterval(this.iTimer);
  this.secondesCounting();
  this.iTimer = setInterval(() => this.secondesCounting(), 1000);
}

[benbang]

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