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

coder 2023-08-12 原文

总的来说，我对 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>

推荐

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>

关于javascript - clearInterval() 不适用于使用 JavaScript 的时钟计时器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39940187/

计时 clearInterval 34 code button javascript html setinterval jsfiddle

有关javascript - clearInterval() 不适用于使用 JavaScript 的时钟计时器的更多相关文章

ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2
我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div
ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2
我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？最佳答案这是我通过查看rubyzip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d
ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2
类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc
ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2
很好奇，就使用rubyonrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？最佳答案不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提
ruby - 在 Ruby 中使用匿名模块 - 2
假设我做了一个模块如下:m=Module.newdoclassCendend三个问题:除了对m的引用之外，还有什么方法可以访问C和m中的其他内容？我可以在创建匿名模块后为其命名吗(就像我输入“module...”一样)？如何在使用完匿名模块后将其删除，使其定义的常量不再存在？最佳答案三个答案:是的，使用ObjectSpace.此代码使c引用你的类(class)C不引用m:c=nilObjectSpace.each_object{|obj|c=objif(Class===objandobj.name=~/::C$/)}当然这取决于
ruby - 使用 ruby 和 savon 的 SOAP 服务 - 2
我正在尝试使用ruby和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封，在我看来soap请求没有正确的命名空间。任何人都可以建议我
python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2
关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。
ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2
我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t
ruby - 使用 ruby 将 HTML 转换为纯文本并维护结构/格式 - 2
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。最佳答案首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
ruby-on-rails - Rails 常用字符串(用于通知和错误信息等) - 2
大约一年前，我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞，我可以在一个地方轻松完成，而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje

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

问题:

解决方案:

补充说明:

推荐

有关javascript - clearInterval() 不适用于使用 JavaScript 的时钟计时器的更多相关文章

随机推荐