Question

我有一个要求，我需要重复调用一个调用setInterval的函数。我遇到的问题是，如果生成一个函数（比如说每1秒）并且使用setInterval设置它;如果我们在没有clearInterval的情况下调用setInterval两次/更多，则函数会继续调用自身。例如：

<!DOCTYPE html>
 <html>
 <body>

  <p>A script on this page starts this clock:</p>

   <p id="demo"></p>
   <button onclick="myStartFunction()">Start time</button>
   <button onclick="myStopFunction()">Stop time</button>

<script>

var myVar;
function myStartFunction(){
  myVar = setInterval(function(){ myTimer() }, 1000);
 }

function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = t;
}

function myStopFunction() {
  console.log(myVar);
  clearInterval(myVar);
  console.log(myVar);
}
 </script>

 </body>
 </html>

如果我单击“开始时间”按钮两次而不单击“中间停止时间”，则该功能不会停止。这只是该场景的一个示例。无论如何要解决这个问题？

Answer 1

在你的startFunction中，只清除任何现有的间隔。否则，您将创建多个间隔，但仅存储对创建的 last 间隔的引用。

例如：

function myStartFunction(){
  if(myVar) {
    myStopFunction();
  }
  myVar = setInterval(function(){ myTimer() }, 1000);
 }

Answer 2

你一遍又一遍地覆盖同一个myVar ......这意味着停止功能只会停止最后一个计时器启动。如果您只想运行一个setInteval，只需在启动前添加对stop函数的调用。

setInterval，clearInterval不起作用

2 个答案: