javascript - clearInterval 按钮不停止 setInterval 倒计时

标签 javascript timer setinterval countdown clearinterval

想法是用分钟和秒做一个简单的 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>

最佳答案

问题是您在 start() 函数中声明了 var secoutput = setInterval(function(){。因此,您无法访问该特定的声明start() 函数之外的变量。如果您只是删除 var 声明并且只有 secoutput = setInterval(function(){ 那么你的代码会工作。你可以在 JavaScript here 中了解更多关于闭包的信息。

关于javascript - clearInterval 按钮不停止 setInterval 倒计时,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51032160/

相关文章:

java - 时间戳、定时器、时间问题

java - Android Timer 时间表与 scheduleAtFixedRate

javascript - MomentJS 倒计时与 diff

javascript - jQuery。运行时更改 setInterval 时间

javascript - 如何更改 AngularJS 中的一次性绑定(bind)数据?

javascript - 如何在 Shiny 的某些单元格中创建带有空格的类似矩阵的复选框组?

qt - 如何在 Qt 中读取 QPlainTextEdit 的每一行?

javascript - setInterval() 不适用于 style.marginLeft

javascript - 渲染方法在内部映射值时中断

javascript - 如何使用两个 if 条件迭代 Handlebars.js 中的对象列表?