Discussion :

[clickandgo]

Bonjour à tous,

Je n'arrive pas à arrêter un chrono en cours depuis un autre module / fonction...

J'ai créé ce code dans un fichier à part (chrono.js) dont j'exporte la variable "t", or dans une autre fonction (main.js) si je fais un clearTimeOut(t) cela ne fonctionne pas, au contraire le chrono s'emballe et ne revient pas à zéro :

Code :

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

1
2
3
4
5
 
//remise à zéro chrono
  clearTimeout(t)
  divChrono.textContent = "00:00:00"
  timer()

Comment faire pour utiliser le stop ou pause de ce chrono n'importe où dans le code ? Merci pour vos réponses.

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
import {divChrono} from "../constants.js"
 
var sec = 0
var heures = 0
var min = 0
export var t
 
const tick = () => {
    sec++
    if (sec >= 60) {
        sec = 0
        min++
        if (min >= 60) {
            min++
            heures++
        }
    }
}
 
const ajout = () => {
    tick()
    divChrono.textContent = (heures > 9 ? heures : "0" + heures) +
        ":" + (min > 9 ? min : "0" + min) +
        ":" + (sec > 9 ? sec : "0" + sec)
    timer()
}
 
export const timer = () => {
    t = setTimeout(ajout, 1000)
}

[javatwister]

Salut,

Si t est défini dans une fonction, tu ne peux y faire référence depuis un clearTimeout extérieur;
Donc, définis le timer en amont.

[clickandgo]

Vous voulez dire de réintégrer la fonction timer() dans le main.js ? On ne peut donc pas séparer le code ?

[javatwister]

Je ne pratique pas l'importe / export donc je n'ai pas un avis très clair; mais si tu n'atteins pas t par clearTimeout() c'est que t est hors de portée donc probablement défini à un niveau plus local;

[Beginner.]

Salut,

Vous voulez dire de réintégrer la fonction timer() dans le main.js ? On ne peut donc pas séparer le code ?

Oui je trouve aussi que l'un des intérêts des modules c'est de séparer le code mais ce n'est pas ce que tu sembles faire...

Tu n'as pas donné tout le code mais à priori il y a un mélange, tes modules sont interdépendants, cela peut devenir problématique et illisible, même toi tu risques de t’emmêler les pinceaux... Enfin j'ai peut-être mal compris...


Par exemple ton chronos dépend d'un élément extérieur : il agit directement sur divChrono, ce qui d'ailleurs le limite à divChrono ce qui est dommage quand même car une fonctionnalité comme un chronos devrait être indépendante, on devrait pouvoir l'utiliser autant qu'on veut... Par exemple tu pourrais vouloir utiliser plusieurs chronomètres dans ta page web avec chacun leur méthodes (start, stop, reset...) et leurs données (valeur initiale, valeur courante,) et chacun leurs variables....

Cela peut vite devenir ingérable mais avec la POO cela devrait être faisable, par exemple tu pourrais utiliser une class chronos... Et c'est cette class que tu exporterais...

[clickandgo]

Merci Beginner,

Le transformer en classe est ce que je pensais faire car avec des getters/setters puis exportation de la classe effectivement ça marche toujours, mais je suis allé trop vite...

Je change ça et reposterai le code final ici pour ceux que ça intéresserait...

[Beginner.]

Salut,

Voici ci-après un exemple pour ceux que cela intéresserait :

Page : https://teste-chrono.glitch.me/
Code : https://glitch.com/edit/#!/teste-chr...ono.js%3A1%3A0

Ta fonction tick contient une erreur, je te laisse voir où...

Après si tu veux faire un code plus fiable il ne faudrait pas se baser sur setTimeout car tu ne peux pas être sûr qu'elle respectera le délai que tu lui donnes...

Bien sûr la plupart du temps à l’échelle humaine on ne verra rien donc on garde cette fonction pour mettre à jour l'affichage mais pour le calcul du temps réel il vaut utiliser autre chose (il y a des fonctions pour ça...)