总的来说，我对 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 作为我最后的资源，所以如果有人能给我一些解决这个问题的指导，我会用你的名字给我的第一个 child 命名。

提前谢谢你。

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

更新:

我在评论中提到了这一点，但代码是在外部 .js 文件中。然后将 .js 文件链接到 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 部分的样子。

<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 文件中(外部文件被链接到文档)？我该怎么做才能让它在外部文件中工作？

最佳答案

问题:

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

解决方案:

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

补充说明:

您的代码也可以通过 StackOverflow 片段运行:

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

javascript - clearInterval() 不适用于使用 JavaScript 的时钟计时器

问题:

解决方案:

补充说明:

推荐

上一篇：php - 使用 php 更新/删除表单数据以使用 phpmyadmin 更新数据库

下一篇：javascript - jQuery scrollTop 值是什么意思？