clearInterval() 不适用于 JavaScript 的时钟定时器

Question

我对 JavaScript 和一般编程还很陌生。我目前正在处理一些我正在玩的代码，我想知道是否有人可以给我一些建议。

背景：

我正在使用的代码相当简单； setInterval 上有一个当前时间为运行的时钟，可按秒更新。

时钟下方有一个按钮，上面写着“停止”，按下后，它将清除间隔，然后按钮将显示为“开始”。如果再次按下“开始”按钮，它将在当前时间继续计时。所以基本上这个按钮可以切换时钟的间隔，并且根据它的状态，按钮将显示为“开始”或“停止”。

W3Schools: JS Timing 是我在创建我正在使用的代码时最初引用的地方。这是我了解 setInterval 和 clearInterval 工作原理的地方。我还采用了示例中的一些代码并对其进行了调整，以便我可以尝试关闭和打开时钟定时器。

代码：

var clock09 = window.setInterval(myTimer09, 1000);

function myTimer09() {
  var d = new Date();
  var t = d.toLocaleTimeString();
  document.getElementById("req09").innerHTML =
    "<h1>" + t + "</h1>";
}

function toggle10() {
  var button = document.getElementById("button10").innerHTML;
  if (button == "Stop") {
    window.clearInterval(clock09);
    document.getElementById("button10").innerHTML = "Start";
  } else {
    clock09 = window.setInterval(myTimer09, 1000);

    document.getElementById("button10").innerHTML = "Stop";
  }
}

<span class="center" id="req09"></span>
<button type="button" id="button10" onclick="toggle10()" class="button">Stop</button>

https://jsfiddle.net/dtc84d78/

问题：

所以我的代码问题是按钮从“停止”按钮切换到“开始”按钮，但是 clearInterval 不适用于具有 setInterval 的变量。

我在 SO such as this one 中搜索了类似的问题，我听从了他们的建议，但仍然一无所获。经过几个小时的思考，我决定直接从 W3Schools 复制粘贴一些例子到 jsFiddle，但这甚至不起作用（包含在 jsfiddle link 中）？

我真的很想知道为什么 clearInterval() 对我不起作用？可能是我的电脑、浏览器或其他任何东西？我将把 SO 作为我的最后一个资源，所以如果有人能给我一些关于这个问题的指导，我会以你的名字命名我的第一个 child。

提前致谢。

额外信息： 我目前在 Mac 桌面上工作，使用 Komodo 编写代码，我正在使用 Google Chrome 预览代码。

更新：

我在评论中提到了这一点，但代码是在外部 .js 文件中。然后 .js 文件被 link 编辑在 head 标签之间，就在结束 body 标签之前。

<head>
  <meta charset="utf-8" />
  <title>Program</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/program-05.css">
  <script type="text/javascript" src="scripts/program-05.js">
    /* <![CDATA[ */
    /* ]]> */
  </script>
</head>

<body onload="checkCookies(); setTimeout(function() { func11() }, 5000);">

  . . . code for stuff

  . . . code for clock timer

  . . . code for other stuff

  <script type="text/javascript" src="scripts/program-05.js">
    /* <![CDATA[ */
    /* ]]> */
  </script>
</body>

在@Matz 提到将时钟计时器 js 代码粘贴到头部部分后，代码运行良好！这是目前为止在头部部分的样子。

<head>
  <meta charset="utf-8" />
  <title>Program</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/program-05.css">
  <script type="text/javascript" src="scripts/program-05.js">
    /* <![CDATA[ */
    /* ]]> */
  </script>
  <script>
    ///*
    var clock09 = window.setInterval(myTimer09, 1000);

    function myTimer09() {
      var d = new Date();
      var t = d.toLocaleTimeString();
      document.getElementById("req09").innerHTML =
        "<h1>" + t + "</h1>";
    }

    function toggle10() {
        var button = document.getElementById("button10").innerHTML;
        if (button == "Stop") {
          window.clearInterval(clock09);
          document.getElementById("button10").innerHTML = "Start";
        } else {
          clock09 = window.setInterval(myTimer09, 1000);

          document.getElementById("button10").innerHTML = "Stop";
        }
      }
      //*/
  </script>
</head>

虽然这很好用，但我现在想弄清楚为什么时钟定时器 js 代码直接在头部部分而不是将它保存在外部 .js 文件中（外部文件是link在文档中编辑）？我该怎么做才能让它在外部文件中工作？

Answer 1

您在 myTimer09 函数中声明了一个新的日期变量，因此每次调用它时，它都会显示当前时间。您应该在函数外声明时间，然后将其传递给函数。当您停止计时器时，您应该保存时间值，以便您可以使用该值重新启动。

Answer 2

修复计时器启动和停止的一种方法是将 javascript 移动到 HEAD 标记之间，以便在 html 加载时声明函数。我完成了这项工作：

<html>
  <head>
    <title>Stuff</title>

    <script >

      var clock09 = window.setInterval(myTimer09, 1000);

      .... your code

   </script>

  </head>
  <body>
    <span class="center" id="req09"></span>
    <button type="button" id="button10" onclick="toggle10()" class="button">Stop</button>

  </body>
</html>

Answer 3

这似乎是 JSFiddle 的问题。

onclick 处理程序正在寻找实际上未定义的 window.toggle10（检查控制台中的错误）。好像这是something others have seen with JSFiddle

我已将您的代码 C&P 到 JSbin 中，并且 it works 如上所述！

Answer 4

问题：

这是因为默认的 Load Type 设置为 onLoad，它会将您的 javascript 代码包装在 window.onload = function() {} 因此你的函数范围被限制在 onload 函数中并且它在外部不可用：

解决方案：

单击 Fiddle 的 Javascript 部分中的 Javascript 设置，将其更改为 No wrap - in body 然后它将起作用，因为这现在会将您的 Javascript 代码放在 body 标签中。

补充说明：

您的代码也可以通过 Whosebug 片段运行：

/*My Problem*/
var clock09 = window.setInterval(myTimer09, 1000);

function myTimer09() {
  var d = new Date();
  var t = d.toLocaleTimeString();
  document.getElementById("req09").innerHTML =
    "<h1>" + t + "</h1>";
}

function toggle10() {
  var button = document.getElementById("button10").innerHTML;
  if (button == "Stop") {
    window.clearInterval(clock09);
    document.getElementById("button10").innerHTML = "Start";
  } else {
    clock09 = window.setInterval(myTimer09, 1000);

    document.getElementById("button10").innerHTML = "Stop";
  }
}

/*W3S Problem*/
var myVar = setInterval(myTimer, 1000);

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

<!-- My Problem -->
<span class="center" id="req09"></span>
<button type="button" id="button10" onclick="toggle10()" class="button">Stop</button>

<hr>
<hr>
<!-- W3S Problem -->
<p id="demo"></p>
<button onclick="clearInterval(myVar)">Stop time</button>

clearInterval() 不适用于 JavaScript 的时钟定时器

clearInterval() not working on clock timer with JavaScript

html

javascript

setinterval

jsfiddle

clearinterval

问题：

解决方案：

补充说明：

推荐