Discussion :

[Lunesti]

J'ai essayé de décortiquer ce que tu as fais (au passage merci d'avoir fait une proposition)

Code :

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

this.timeEnd = Date.now() + this.duree;

Ici tu calcules le temps restant du chrono en ms en additionnant le nb de ms depuis le 1er janvier 1970 + la durée du chrono en ms

donc: temps restant du chrono = nb de ms depuis le 1er janvier 1970 + durée du chrono en ms


Ensuite la variable iTimer contenant la valeur 'null' (c'est à dire aucune valeur) est égale à la fonction setInterval qui va déclencher répétitivement la même action sur decompteTimer (toute les 1000ms, action)
donc : valeur null du chrono = action déclenché toute les 1000 ms sur la méthode decompteTimer

Code :

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

1
2
3
this.iTimer = setInterval(() => {
      this.decompteTimer();
    }, 1000);

Ensuite la fonction stopTimer va stopper la répétition à interval régulier de decompteTimer (donc stopper le chrono)
donc : arrêt du chrono = stopper l'action déclenché toute les 1000ms sur la méthode decompteTimer

Code :

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

1
2
3
stopTimer() {
    clearInterval(this.iTimer);
  }

Ensuite la méthode décompteTimer:

Code :

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

const reste = Math.ceil((this.timeEnd - Date.now()) / 1000);

Si j'ai bien compris , la fonction math.ceil retourne le plus petit entier supérieur ou égal au nb donné (ref: MDN)
donc tu as fais: temps restant = (temps restant à la fin du chrono en ms - le nb de ms depuis le 1er janvier 1970) / 1000. (je suppose que la division par 1000 est pour retrouver une valeur en seconde (ms / 1000)
Donc s'il reste 15 minutes au chrono, tu calcul le temps restant (15 minutes) moins le nb de ms depuis le 1er janvier 1970 ? (donc par ex 15 min - 290348534905384ms ?)

(Si je me trompe dans ma formulation merci de me corriger)


Après tu poses une condition :

Code :

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

1
2
3
4
5
6
   if (reste > 0) {
      // formatage de la sortie, plein de façon de faire
      // ou avec String(number).padStart(2, "00");
      const h = ("00" + parseInt(reste / 3600, 10)).slice(-2);
      const m = ("00" + parseInt((reste % 3600) / 60, 10)).slice(-2);
      const s = ("00" + parseInt(Math.ceil((reste % 3600) % 60), 10)).slice(-2);

si le temps restant est supérieur à 0, tu calcules le reste de la division entre le temps restant / 3600, le tout divisé par 60 (par contre je n'ai pas compris le 10, et le slice(-2), j'ai regardé, mais je n'ai pas compris l'utilisation de slice dans ce cas.

Je crois que l'utilisation de date.now() est encore un peu flou pour moi. car quand je lis les calculs je trouve ça étrange. Est -ce que la fonction date.now() n'est pas en réalité le fuseau horaire actuel c'est à dire par ex: 30/06/20 , 11:10 et 34 secondes ?
dans ce cas, tu fais tes calculs en fonction du fuseau horaire actuel ?

Je pense que si je comprends cela, je serais en mesure de comprendre ton code.

[NoSmoking]

donc: temps restant du chrono = nb de ms depuis le 1er janvier 1970 + durée du chrono en ms

Non temps de fin du chrono, indirectement heure de fin, pas temps restant.

Ensuite la variable iTimer contenant la valeur 'null' (c'est à dire aucune valeur) est égale à la fonction setInterval qui va

pas exactement la méthode setInterval renvoi une valeur identifiant le timer ce qui permet de le « clearer » avec clearInterval.

(toute les 1000ms, action)

Non setInterval n'est appelé qu'une seule fois pour assurer la répétition de l'événement contrairement à setTimeout.

Ensuite la fonction stopTimer va stopper la répétition à interval régulier de decompteTimer (donc stopper le chrono)

Non elle scratch le timer qui arrêtera de ce fait ses appels consécutif.

Si j'ai bien compris , la fonction math.ceil retourne le plus petit entier supérieur ou égal au nb donné (ref: MDN)

Oui cela permet d'afficher, par exemple 04s, et non 03s quand il reste 3.25s au compteur.

donc tu as fais: temps restant = (temps restant à la fin du chrono en ms - le nb de ms depuis le 1er janvier 1970) / 1000. (je suppose que la division par 1000 est pour retrouver une valeur en seconde (ms / 1000)
Donc s'il reste 15 minutes au chrono, tu calcul le temps restant (15 minutes) moins le nb de ms depuis le 1er janvier 1970 ? (donc par ex 15 min - 290348534905384ms ?)

(Si je me trompe dans ma formulation merci de me corriger)

Non

• this.timeEnd est le nombre de ms qu'il y a entre le 01/01/1970 et la fin du chrono
• Date.now() est le nombre de ms qu'il y a entre le 01/01/1970 et le moment où on lit cette valeur

la différence donne donc bien le temps restant en ms, c'est le pourquoi de la division par 1000 puisque l'on parle en seconde.

si le temps restant est supérieur à 0, tu calcules le reste de la division entre le temps restant / 3600, le tout divisé par 60 (par contre je n'ai pas compris le 10, et le slice(-2), j'ai regardé, mais je n'ai pas compris l'utilisation de slice dans ce cas.

C'est une façon comme une autre de pour obtenir un format 00:00:00,

• "00" + 9 va donner "009" et si je fais un slice(-2) je garde "09" ;
• "00" +10 va donner "019" et si je fais un slice(-2) je garde "10" ;
• "00" +120 va donner "120" et si je fais un slice(-2) je garde "20" ;
  etc.

tu peux si cela ne te correspond pas revenir à une écriture plus simple du type

Code :

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

1
2
3
if (val) < 10) {
  val = "0" + val;
}

Est -ce que la fonction date.now() n'est pas en réalité le fuseau horaire actuel c'est à dire par ex: 30/06/20 , 11:10 et 34 secondes ?

Non reprend la définition.

La méthode Date.now() renvoie le nombre de millisecondes écoulées depuis le 1er Janvier 1970 00:00:00 UTC.

J'espère ne rien avoir oublié !

Nota :
dans const s = ("00" + parseInt(Math.ceil((reste % 3600) % 60), 10)).slice(-2); le Math.ceil ne sert à rien, je corrige,déjà fait plus haut.

[Lunesti]

Je reviens avec du retard, j'ai basculé sur d'autres tâches à faire par apport à mon projet.

entre temps j'ai trouvé un code pour le chrono qui fonctionne :

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
/*------------------------------------------
CHRONO
------------------------------------------*/
 
class Chrono {
 
    constructor(min, sec, time, storage) {
        this.min = min;
        this.sec = sec;
        this.time = time;
        this.stopWatchElt = Dom.stopWatchElement;
        this.storage = storage;
    }
 
    init() {
        this.stopWatchElt.innerHTML = this.min + " : " + this.sec;
        this.timer = setInterval(this.tick.bind(this), this.time);
    }
 
    clearMe() {
        console.log('clear')
        clearInterval(this.timer);
        Dom.textChronoElement.style.display = 'none'; 
        Dom.textChronoAnnulerElement.style.display = 'block'; 
        Dom.cancelElement.style.display = 'none';
        if (Dom.cancelElement.style.display = 'none') {
            this.clearStorage();
        }
    }
 
 
    tick() {
        //console.log('timing...');
        this.sec--;
        if (this.sec == 0) {
            this.min--;
            this.sec = 59;
 
        } else if (this.min === 0 && this.sec === 1) { 
            this.clearMe();
        }
        this.stopWatchElt.innerHTML = this.min + " : " + this.sec;
    }
};

Le sujet initial étant comment passer du procédural en POO étant résolu, maintenant je dois me pencher sur comment faire pour que, lorsque je refresh la page, le chrono continu de tourner. le refresh de la page ne doit pas arrêter le chrono. le chrono s'arrête que lorsqu'on ferme le navigateur ou lorsqu'on clique sur un bouton.

[NoSmoking]

Le sujet initial étant comment passer du procédural en POO étant résolu, maintenant je dois me pencher sur comment faire pour ...

Une discussion = une question Poser plusieurs questions dans un seul et même fil nuit grandement à la qualité du forum : notamment, lors d'une recherche, tout le contenu du fil n'est pas indiqué dans le titre, elle devient donc plus ardue. Notre but est de maintenir une base de connaissances facile à exploiter par tous les visiteurs, utilisable par tous. Vous avez pu bénéficier de ce forum en posant vos questions, laissez la possibilité aux suivants de bénéficier des réponses en leur offrant un sujet moins dispersé.

Merci d'en tenir compte !

[Lunesti]

Oui, je ne comptais pas poser une autre question içi 😉
Sujet résolu