compte à rebours javascript avec les boutons start et stop

je dois faire un compte à rebours simple de 5 à zéro, avec les boutons pour démarrer et arrêter le compteur. La seule chose que je ne sais pas, c'est pourquoi mon compteur ne s'arrête pas.

le code est présenté ci-dessous: 

   function clock() {
     var myTimer = setInterval(myClock, 1000);
     var c = 5;

     function myClock() {
       document.getElementById("demo").innerHTML = --c;
       if (c == 0) {
         clearInterval(myTimer);
         alert("Reached zero");
       }
     }
   }
<p id="demo">5</p>
<button onclick="clock()">Start counter</button>
<button onclick="clearInterval(myTimer)">Stop counter</button>
2
demandé sur Liam 2016-11-16 20:22:31

3 réponses

voilà, vous aviez juste besoin de rendre myTimer global. J'ai aussi réparé un bug où après avoir redémarré le minuteur, il ne montrera pas 5. 

var myTimer;
   function clock() {
     myTimer = setInterval(myClock, 1000);
     var c = 5;

     function myClock() {
       document.getElementById("demo").innerHTML = --c;
       if (c == 0) {
         clearInterval(myTimer);
         alert("Reached zero");
       }
     }
   }
<p id="demo">5</p>
<button onclick="clock(); document.getElementById('demo').innerHTML='5';">Start counter</button>
<button onclick="clearInterval(myTimer);">Stop counter</button>
5
répondu Feathercrown 2016-11-16 17:27:57

myTimer s'entend uniquement de la fonction. Une solution consiste à le rendre mondial. 

var myTimer;
function clock() {
     myTimer = setInterval(myClock, 1000);
     var c = 5;

     function myClock() {
       document.getElementById("demo").innerHTML = --c;
       if (c == 0) {
         clearInterval(myTimer);
         alert("Reached zero");
       }
     }
   }
<p id="demo">5</p>
<button onclick="clock()">Start counter</button>
<button onclick="clearInterval(myTimer)">Stop counter</button>
3
répondu Jamiec 2016-11-16 17:26:21

Rapide et sale " réponse 

   var myTimer;
   function clock() {
     myTimer = setInterval(myClock, 1000);
     var c = 5;

     function myClock() {
       document.getElementById("demo").innerHTML = --c;
       if (c == 0) {
         clearInterval(myTimer);
         alert("Reached zero");
       }
     }
   }
<p id="demo">5</p>
<button onclick="clock()">Start counter</button>
<button onclick="clearInterval(myTimer)">Stop counter</button>

timer dans votre fonction (parce que sa déclaration, var , à l'intérieur de votre fonction) ne peut être accédé qu'à l'intérieur de votre fonction. Déplacer la déclaration var en dehors de votre fonction la rend globale.

meilleure solution

mais mettre les choses dans la portée globale est (la plupart du temps) une mauvaise idée . Si.....il y a un meilleur moyen: 

   
var myTimerObj = (function(document){
   
   var myTimer;

   function start() {
     myTimer = setInterval(myClock, 1000);
     var c = 5;

     function myClock() {
       document.getElementById("demo").innerHTML = --c;
       if (c == 0) {
         clearInterval(myTimer);
         alert("Reached zero");
       }
     }
   }
   
   function end() {
       clearInterval(myTimer)
   }

   return {start:start, end:end};
 })(document);
<p id="demo">5</p>
<button onclick="myTimerObj.start()">Start counter</button>
<button onclick="myTimerObj.end()">Stop counter</button>

la meilleure solution utilise un modèle de module révélateur et tiendra le timer à l'intérieur d'une portée privée, Tl;Dr il arrête le timer polluant la portée globale.

3
répondu Liam 2016-11-17 08:47:26