Gestion d'un timer au clic de bouton

StopTimer

Sujet résolu

17 janvier 2020 à 10:58:34

Bonjour, je m'exerce sur la gestion du temps en Js, je débute et je bloque complètement. je voudrai stopper mon timer au click d'un bouton stop

Je sais que pour le stop clearInterval me permettrai de le stopper je vois pas ou l'utiliser. Si vous pouvez me donner des conseils ou des pistes je vous en remercie d'avance.

Voici mon code

<!DOCTYPE html>
<html>

		<head>
			<meta charset="UTF-8">
			<link rel="stylesheet" href="style.css">
     
        
      <title> chronometre</title>
		</head>
       
        <body>
                <button id="restart"> restart </button>
                <button id="stop"> stop </button>
                <button id="start_timer">start</button>
                <p> le chronomètre est à <span= id="countdown"> </span>


                           <script src="timer.js"></script>
        </body>

</html>

   document.getElementById("start_timer").addEventListener("click",function(){
    let seconds = 1200;
    const countdownTimer = setInterval(
        function(){
            const minutes = Math.round((seconds - 30) / 60); //  (1200 - 30) / 60) = 19.5  //math round permet d'arrondir à 20 
            let remainingSeconds = seconds % 60;   // 500 modulo 60  = 20
            if(remainingSeconds < 10) { 
                remainingSeconds = "0" + remainingSeconds; // on ajoute un 0 en chaine de caractère , en fait c'est une question de format     10 min 5 sec => 10 min 05 sec
            }
            document.getElementById("countdown").innerHTML =   + minutes + " minutes" + ":" +remainingSeconds + " secondes";
 
            if(seconds == 0) { // si var seconds = 0 alors le minuteur est terminé et affiche un message.
                clearInterval(countdownTimer); // Permet d'annuler une action répétée minutée initiée via un appel à setInterval().
                document.getElementById("countdown").innerHTML = "fin du compte à rebours"; // si les secondes sont = 0 alors affiche "fin du compte à rebours"
            }
            else{
                seconds --; // si les secondes ne sont pas à zéro alors on décremente.
            }
    },1000); // / l'interval du décompte est de 1000 millisecondes soit 1 seconde.
});

-
Edité par SophieGuichard 17 janvier 2020 à 11:04:23

MouMouDu67

17 janvier 2020 à 11:42:11

Je te conseille d'opter pour une ecriture en POO

Crée une classe Chronometre, ce sera plus facile

J'ai repris ton code mais avec une classe (POO)

 class Chronometre{
     constructor(minutes,secondes){
         this.minutes = minutes;
         this.secondes = secondes;
     }
       updateChrono(){
           
            const minutes = Math.round((seconds - 30) / 60); //  (1200 - 30) / 60) = 19.5  //math round permet d'arrondir à 20
            let remainingSeconds = seconds % 60;   // 500 modulo 60  = 20
            if(remainingSeconds < 10) {
                remainingSeconds = "0" + remainingSeconds; // on ajoute un 0 en chaine de caractère , en fait c'est une question de format     10 min 5 sec => 10 min 05 sec
            }
            document.getElementById("countdown").innerHTML =   + minutes + " minutes" + ":" +remainingSeconds + " secondes";
  
            if(seconds == 0) { // si var seconds = 0 alors le minuteur est terminé et affiche un message.
                clearInterval(countdownTimer); // Permet d'annuler une action répétée minutée initiée via un appel à setInterval().
                document.getElementById("countdown").innerHTML = "fin du compte à rebours"; // si les secondes sont = 0 alors affiche "fin du compte à rebours"
            }
            else{
                seconds --; // si les secondes ne sont pas à zéro alors on décremente.
            }
     }
     start(seconds = this.secondes){
             
    const countdownTimer = setInterval(
        function(){
          updateChrono();
    },1000); // / l'interval du décompte est de 1000 millisecondes soit 1 seconde.
     }
   
     stop(){
         alert(this.secondes)
     }
 }





var chronos = [];


document.getElementById("start_timer").addEventListener("click",function(){
var chronometre = new Chronometre(0,10);
    chronos.push(chronometre);
    chronometre.start();
});

document.getElementById("stop").addEventListener("click",function(){
chronos[0].stop();
});

j'ai un petit soucis par contre j'ai une erreur "updateChrono() is not defined"

-
Edité par MouMouDu67 17 janvier 2020 à 12:55:16

Angelisium

17 janvier 2020 à 14:46:51

Bonjour,

Le plus simple pour ta problématique Sophie, c'est d'utiliser une variable global en combinaison avec une fonction on/off.

Je t'ai fait un exemple ici:

var intervalID, //Variable global qui recevra l'id de l'interval
    isStart= false, //Variable global qui indique l'état du chronomètre (en marche ou non)
    second= 0; //Le nombre de seconde écoulé (enfin pour être exacte, le nombre d’exécution de l'interval) *voir en fin de message


const action_ival= function() {
    //ici les actions que tu souhaite effectuer dans ton interval
    second++;
    console.log(`${second}s écoulé !`);
};

const chrono= function(act) {
    if(act==="start") {
        intervalID= window.setInterval(action_ival, 1000);
    } else {
        window.clearInterval(intervalID);
    }
};

document.getElementById("start_timer").addEventListener("click", function() {
    //on vérifie si le chrono n'est pas lancé (isStart)
    if(isStart===false) {
        isStart= true;
        chrono("start");
    }
});

document.getElementById("end_timer").addEventListener("click", function() {
    //on vérifie si le chrono est lancé (isStart)
    if(isStart===true) {
        isStart= false;
        chrono("end"); //NB: comme je suis feignant j'utilise un else dans
        //la fonction chrono donc je pourrais mettre n'importe quoi du
        //moment que ce n'est pas "start"
    }
});

Ce n'est que mon avis, mais comme tu débute, je te déconseille de te lancer tout de suite dans les classes (mieux vaut être un peu a l'aise avec le javascript avant de s'y lancer) sache tout de même que les classes ne sont rien de plus que des fonctions (spéciales) un peu jolies (un article ici, pour plus d'info).

Tout a l'heure (plus haut), j'ai parler de nombre d’exécution plutôt que nombre de seconde, parce que setInterval peut dériver un peu voici un bon article qui résume ce qu'il y a à savoir sur les temps en javascript: How JavaScript Timers Work

Edit: Après, si ton chrono est fait pour des petit temps (genre 5-6minute) le fait qu'il y ai une possibilité d'un léger décalage n'est pas très gênant (pour avoir une seconde de décalage, avec une dérive de 4ms [la maximal dont j'ai entendu parler] il faut 250 exécutions (4 minutes et 10 seconde) et encore, c'est en partant du principe que le moteur javascript n'as pas pu corriger la dérive tout seul (parce que le moteur essaye coûte que coûte d'espacer l'interval de pile le temps indiquer)

-
Edité par Angelisium 17 janvier 2020 à 14:55:04

SophieGuichard

20 janvier 2020 à 11:13:15

Bonjour à vous, merci beaucoup pour votre aide !!

Oui effectivement opter pour la poo est une meilleure solution je suis totalement d'accord. Cependant j'ai beaucoup de mal à l'utiliser. Je comprends le principe et l'utilité offerte par la Poo, mais quand il s'agit de l'appliquer concrètement je suis un peu perdue. J'ai pour le moment essayé de refaire pas mal de tutos de cours utiliser la documentation (MDN) mais j'ai toujours pas vraiment d'avancer.

Par exemple j'ai testé de créer un script de signature électronique en place via l'élément Canvas, pour le procédural ça va mais pour le mettre en Poo je bloque totalement. En tout cas merci à vous pour vos réponses je vais regarder ça en détail pour essayer de bien comprendre.

Bonne journée.

-
Edité par SophieGuichard 20 janvier 2020 à 12:05:31