问题：

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

为什么clearInterval()的任何内容与我无关，我真的很生气？可能是我的电脑，浏览器或其他什么？我作为我的最后资源来到SO，所以如果有人能给我一些指导这个问题，我会在你之后给我的第一个孩子起名字。

提前谢谢。

额外信息： 我目前正在使用Mac桌面，使用Komodo编写代码，我正在使用谷歌浏览器预览代码。

更新：

我在评论中提到过这一点，但代码中的内容是在外部的.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文件中（外部文件链接在文件）？我该怎么做才能使它在外部文件中工作？

Answer 1

问题：

这是因为默认加载类型设置为 onLoad ，它将您的javascript代码包装在window.onload = function() {}中，因此您的功能范围受限于onload功能，但在外面无法使用：

解决方案：

单击小提琴的Javascript部分中的Javascript设置，将其更改为无包装正文，它将起作用，因为现在将您的Javascript代码放入body标签

附加说明：

您的代码也可以通过StackOverflow片段工作：

＆＃13;

/*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();
}

＆＃13;

<!-- 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>

＆＃13;

建议

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>

Answer 2

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

Answer 3

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

def myloss(ytrue, ypred):
    x = keras.objectives.mean_squared_error(ytrue, ypred)
    return theano.printing.Print('loss for each sample')(x)

model.compile(loss=myloss)

Answer 4

这似乎是JSFiddle的一个问题。

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

我已将C＆amp; Ped代码输入到JSbin和it works中，如上所述！

clearInterval（）无法使用JavaScript

4 个答案:

问题：

解决方案：

附加说明：

建议