Таймер обратного отсчета JavaScript с кнопками запуска и остановки

Мне нужно сделать простой таймер обратного отсчета от 5 до нуля, с кнопками СТАРТ и ОСТАНОВ счетчика. Единственное, чего я не знаю, так это почему мой счетчик не останавливается.

Код представлен ниже:

   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>


javascript countdown counter countdowntimer
person Tommi Tiihonen    schedule 16.11.2016    source источник
comment
myTimer существуют только внутри вашей функции. Вам нужно сделать его глобальным   -  person Liam    schedule 16.11.2016

Ответы (4)


arrow_upward
8
arrow_downward

Ну вот, вам просто нужно сделать myTimer глобальным. Я также исправил ошибку, из-за которой после сброса таймера он не показывал 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>

person Feathercrown    schedule 16.11.2016

arrow_upward
7
arrow_downward

Быстрый и грязный ответ

   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 в вашей функции (поскольку она объявлена ​​var внутри вашей функции) доступна только внутри вашей функции. Перемещение объявления var за пределы вашей функции делает его глобальным.

Лучшее решение

Но помещать вещи в глобальную область видимости — это (в основном) плохая идея. Итак..... есть лучший способ:

   
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>

лучшее решение использует шаблон раскрывающегося модуля и будет хранить timer внутри частной области , Tl;Dr, он останавливает timer, загрязняющий глобальную область.

person Liam    schedule 16.11.2016

arrow_upward
4
arrow_downward

myTimer находится только в пределах функции. Одно из решений — сделать его глобальным.

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>

person Jamiec    schedule 16.11.2016

arrow_upward
0
arrow_downward

Это решение сработало для меня в реакции JS

let Timer =(function(){
    let timerObject;
    let callback=null;
    let seconds=0;
    let counter=()=>{
        seconds++;
        console.log("seconds",seconds);
        if (callback!==undefined) callback(seconds);
    }
    let setCallback=(_callback)=>{callback=_callback }
    let getSeconds=()=>{ return seconds;}
    let reset=()=>{ seconds=0;}
    let start=()=>{timerObject=setInterval(counter,1000);}
    let end=()=>{clearInterval(timerObject);}
    return {"start":start,"end":end, "getSeconds":getSeconds, "reset":reset,"setCallback":setCallback}; })();

export default Timer;
person Jorge Santos Neill    schedule 14.02.2020