Кнопка clearInterval не останавливает отсчет setInterval - PullRequest
Новая
       67

Кнопка clearInterval не останавливает отсчет setInterval

0 голосов
/ 26 июня 2018

Идея состоит в том, чтобы сделать простой отсчет js с минутами и секундами, показывая цифры в HTML-документе, с кнопкой для запуска / продолжения и еще одной для остановки / паузы.Я застрял на секундах при приостановке времени ... Кнопка Пуск работает, но я не могу понять, почему Стоп не работает.Я прочитал несколько похожих вопросов, пытаясь исправить, но все же результат.Есть идеи?

Большое спасибо!

var min = 5;
var sec = 60;
var secoutput;
 
document.getElementById("min").innerHTML = min;
if (sec >= 60)
	{document.getElementById("sec").innerHTML = "00";}
else
	{document.getElementById("sec").innerHTML = secoutput; }
   
function start(){
var secoutput = setInterval(function(){
	sec-=1;
    document.getElementById("sec").textContent = sec;
    if(sec <= 0)
        clearInterval (secoutput);
    },1000);
}

function stop(){
        clearInterval (secoutput);
}
<button onclick="start()">Start</button>
<button onclick="stop()">Stop</button>
    
<p id="min"></p>
<p id="sec"></p>

Ответы [ 3 ]

0 голосов
/ 26 июня 2018

Проблема в том, что вы объявляете var secoutput = setInterval(function(){ внутри функции start().Из-за этого объявления вы не можете получить доступ к этой конкретной переменной за пределами вашей start() функции.если вы просто удалите объявление var и получите только secoutput = setInterval(function(){, тогда ваш код будет работать.Вы можете узнать больше о замыканиях в JavaScript здесь .

0 голосов
/ 26 июня 2018

Проблема заключается в функции start (), в которой вы повторно объявили переменную secoutput.Просто измените это: 

var secoutput = setInterval(function(){ ... }

на это: 

secoutput = setInterval(function(){ ... }
0 голосов
/ 26 июня 2018 

var min = 5;
var sec = 60;
var secoutput;
 
document.getElementById("min").innerHTML = min;
if (sec >= 60)
	{document.getElementById("sec").innerHTML = "00";}
else
	{document.getElementById("sec").innerHTML = secoutput; }
   
function start(){
    // Removed the var so the original variable is used
    secoutput = setInterval(function(){
	sec-=1;
    document.getElementById("sec").textContent = sec;
    if(sec <= 0)
        clearInterval (secoutput);
    },1000);
}

function stop(){
        clearInterval (secoutput);
}
<button onclick="start()">Start</button>
<button onclick="stop()">Stop</button>
    
<p id="min"></p>
<p id="sec"></p>
...