Question

我有以下代码，用于启动和停止计时器。如果在开始和停止时单击一次，它工作正常。如果我多次点击开始如何以及如何停止“之前创建的”setInterval？

<html>
   <head>
      <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() {
             clearInterval(myVar);
         }
      </script>
   </head>
   <body>
      <p id="demo"></p>
      <button onclick="myStopFunction()">Stop time</button>
      <button onclick="myStartFunction()">Start time</button>
   </body>
</html>

Answer 1

setInterval返回的值称为计时器句柄。如果您希望能够多次调用“start”并同时运行多个计时器，则需要将句柄保存在数组中。

例如，如果你想“停止”停止最后计时器，你就开始了：

var timers = [];

function myStartFunction() {
    timers.push(setInterval(function () {
        myTimer();
    }, 1000));
}

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

function myStopFunction() {
    if (timers.length > 0) {
        clearInterval(timers.pop());
    }
}

附注：您不需要myStartFunction中的匿名函数，您可以直接使用myTimer：

function myStartFunction() {
    timers.push(setInterval(myTimer, 1000));
}

Answer 2

应该是这样的。

<html>
   <head>
      <script>
         function myStartFunction() {
             clearInterval(myTimer);
             setInterval(myTimer, 1000);
         }

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

         function myStopFunction() {
             clearInterval(myTimer);
         }
      </script>
   </head>
   <body>
      <p id="demo"></p>
      <button onclick="myStopFunction()">Stop time</button>
      <button onclick="myStartFunction()">Start time</button>
   </body>
</html>

如何清除现有的setInterval？

2 个答案: