【问题标题】：clearInterval() not working on clock timer with JavaScriptclearInterval() 不能使用 JavaScript 处理时钟计时器
【发布时间】：2016-10-09 04:59:57
【问题描述】：

我对 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 链接中）？

我真的快疯了，为什么 clearInterval() 的任何东西都不适用于我？可能是我的电脑、浏览器或其他任何东西？我来 SO 作为我的最后一个资源，所以如果有人能给我一些关于这个问题的指导，我将以你的名字命名我的第一个孩子。

提前谢谢你。

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

更新：

我在 cmets 中提到了这一点，但代码是在一个外部 .js 文件中。然后将 .js 文件链接在 head 标记之间，并且就在 end 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 部分之后，代码运行良好！这是到目前为止在头部的样子。

<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 代码直接位于 head 部分而不是将其保存在外部 .js 文件中（外部文件链接在医生）？我该怎么做才能使它在外部文件中工作？

【问题讨论】：

您只需将 function toggle10() { 更改为 document.toggle10 = function() { 即可修复您的小提琴
我刚刚意识到代码在 SO sn-p 中有效！不幸的是，我正在使用的代码需要位于我正在处理的 index.html 文件中，这也是我无法使用此代码获得我想要的结果的地方。我目前正在尝试查看给出的任何建议是否可以解决问题。注意：所有 javascript 都在一个外部文件 .js 文件中，该文件链接在 HEAD 和 BODY 标记之前。我也没有任何控制台错误。
到目前为止，在所有建议中，将这个问题的 javascript 代码放在 head 标签之间对我有用！现在我的外部 .js 文件被链接，后跟时钟计时器的 js 代码。
看来这篇文章越来越大了，你原来的js不被称为内联的问题已经解决了不是吗？至于外部JS文件的问题，那就另当别论了，可以考虑单独贴出来。
我想我会继续并在 HTML 文件中发布。在发布其他任何内容之前，我将在谷歌上搜索更多关于外部 JS 文件问题的信息。谢谢大家的建议！

标签： javascript html setinterval jsfiddle clearinterval

【解决方案1】：

问题：

这是因为默认的 Load Type 设置为 onLoad 将您的 javascript 代码包装在 window.onload = function() {} 中，因此您的函数范围仅限于 @ 987654327@函数，外面不可用：

解决方案：

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

补充说明：

您的代码也可以通过 StackOverflow sn-p 运行：

/*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>

推荐

Separation of concerns

我建议您将 javascript 代码移动到外部文件中，然后使用 script 标记将它们包含在您的 HTML 中。例如，您将代码移动到 app.js，然后将其包含在 HTML 中：

<!-- make sure the path here is relative to the current HTML -->
<script src="./app.js"></script>

【讨论】：

我很高兴你和@spen 提出了这个问题，因为我现在知道为什么它在小提琴上不起作用。我尝试复制它是将脚本粘贴在头部标签之间。关于如何使用外部 .js 文件中的代码使代码工作的任何建议？最坏的情况我只会将脚本留在头标签之间。附：真的很喜欢图形的使用！让我更容易跟随。
进来，所有的js代码都在一个外部文件中。该文件在 head 标签之间以及 end body 标签之前链接到 html 文档。它看起来像这样：。不幸的是，这种方法不起作用。目前外部文件是链接的，因为我那里还有其他东西，但是计时器时钟的 js 代码位于外部文件之后头部的脚本标记之间。
能否提供重现此问题的小提琴
我已经在顶部编辑了我的帖子，因为我无法在 jsfiddle 中包含我的头部的外观和外观。

【解决方案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>

【讨论】：

我把 js 代码放在头标签之间，就像@Matz 提到的那样。结果：它非常有效！我很高兴这可行，但我需要找到一个不需要将其包含在 head 标签中的解决方案，并且可以将其保留在外部文件中。最坏的情况，这就是我要去做的。有什么建议吗？
只需将 javascript 放到一个文件中。说 timerstuff.js 并将脚本标签更改为：。它仍在 head 标签中，但代码在单独的文件中。

【解决方案3】：

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

【讨论】：

试过了，只是显示当前时间，并没有更新1秒间隔的时间。另外我需要的是当按下“开始”按钮时，时钟计时器将继续，但使用当前时间，而不是它停止的值。所以我认为这行不通。谢谢你的建议！

【解决方案4】：

这似乎是 JSFiddle 的问题。

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

我已将您的代码 C&Ped 到 JSbin 和 it works 中，如所述！

【讨论】：

现在我明白为什么 js 在小提琴中不起作用了。我尝试复制它是将脚本粘贴在头部标签之间。关于如何使用外部 .js 文件中的代码使代码工作的任何建议？在最坏的情况下，我只会将脚本留在头标签之间。