clearInterval 按钮不停止 setInterval 倒计时

Posted 2023-02-24

【中文标题】clearInterval 按钮不停止 setInterval 倒计时

【英文标题】：clearInterval button not stopping setInterval countdown

【发布时间】：2018-06-25 21:41:04

【问题描述】：

这个想法是用分钟和秒做一个简单的 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() 函数中重新声明 secoutput。将var 放在那里。

您在start 内部使用var secoutput，因此您在start 方法内部重新定义了secoutput var 范围。全局 secoutput 从未分配任何内容

【参考方案1】：

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

【参考方案2】：

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>

【参考方案3】：

问题出在您的 start() 函数中，您在其中重新声明了 secoutput 变量。只需改变这个：

var secoutput = setInterval(function() ... 

到这里：

secoutput = setInterval(function() ...