为什么我的第一个 setInterval 停止，而第二个继续运行？答案

【问题标题】：Why is my first setInterval stoping while the second one keeps running?为什么我的第一个 setInterval 停止，而第二个继续运行？
【发布时间】：2020-04-14 07:55:16
【问题描述】：

我想展示两次：一次在你的国家，一次在日本，用 JS
问题是第二个 setInterval 停止了第一个，我不知道如何进行两次运行。

完整代码

<html>
<head></head>
<body>
      <p style="font-size: 20px; font-family: SF Compact Display;">In your region:</p>
      <script type="text/javascript">
         document.write ('<p><span id="date-time">', new Date().toLocaleString(), '<\/span><\/p>')
         if (document.getElementById) onload = function() {
            setInterval ("document.getElementById ('date-time').firstChild.data = new Date().toLocaleString()", 50)
      }
         </script>



      <p style="font-size: 20px; font-family: SF Compact Display;">In Japan:</p>

      <script type="text/javascript">
         var asiaTime = new Date().toLocaleString("en-US", {timeZone: "Asia/Tokyo"});
            asiaTime = new Date(asiaTime);
         var options = {dateStyle: 'medium', hour:'numeric', minute:'numeric', second:'numeric'}
            console.log('Asia time: '+asiaTime.toLocaleString(options))
            document.write ('<p><span id="japantime">', asiaTime, '<\/span><\/p>')
         if (document.getElementById) onload = function() {
            function japanTime() {
               document.getElementById('japantime').firstChild.data = asiaTime
            }
            setInterval ("document.getElementById ('japantime').firstChild.data = new Date().toLocaleString()", 50)
         }
         </script>
</body>
</html>

如果有人可以帮助我，那就太棒了！

【问题讨论】：

一个新的setInterval不会阻止之前的setInterval。我认为这两种情况发生得非常快，而你只看到其中一种的结果。 setInterval 返回一个 ID，您可以在开始下一个间隔之前使用该间隔。也就是说，setTimeout 在大多数情况下往往是更好的选择，但您确实需要在每次循环交互时手动重新运行它。
事实上我正在做类似的事情：link
@JeremyJStarcher 但时间在“在您所在的地区：”下运行
但是你为什么还需要两个setIntervals呢？您可以将所有代码放在一个 setInterval 中。为什么它需要这么快？
您链接中的代码与您问题中的代码有很大不同。如果你想要有用的答案，你必须尽可能提出最好的问题。您甚至可以根据需要更新问题。

标签： javascript html time setinterval

【解决方案1】：

请为两者使用相同的setInterval。
+ 不要在代码中混用 css / html / JS。
.....（每个人都在他的位置上，（js就在</body>之前）
+ 1000 毫秒更好

最终代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Date Time</title>
  <style>
    .sf20 {
      font-size: 20px;
      font-family: SF Compact Display;
    }
  </style>
</head>
<body>
  <p class="sf20">In your region:</p>
  <p><span id="local-time"></span></p>

  <p class="sf20">In Japan:</p>
  <p><span id="japan-time"></span></p>
<script>
  const LocalTime = document.getElementById('local-time')
    ,   JapanTime = document.getElementById('japan-time')
    ;
  setInterval(() => {
    let LocalDate = new Date()
    LocalTime.textContent = LocalDate.toLocaleString()
    JapanTime.textContent = LocalDate.toLocaleString("en-US", {timeZone: "Asia/Tokyo"})
  }, 1000); // =1s
</script>
</body>
</html>

测试：

const LocalTime = document.getElementById('local-time')
  ,   JapanTime = document.getElementById('japan-time')
  ;
setInterval(() => {
  let LocalDate = new Date()

  LocalTime.textContent = LocalDate.toLocaleString()
  JapanTime.textContent = LocalDate.toLocaleString("en-US", {timeZone: "Asia/Tokyo"})
}, 1000); // =1s

.sf20 {
  font-size: 20px;
  font-family: SF Compact Display;
}

<p class="sf20">In your region:</p>
<p><span id="local-time"></span></p>

<p class="sf20">In Japan:</p>
<p><span id="japan-time"></span></p>

【讨论】：

非常感谢，你的代码比我的好 100 倍！！！
@AnimenoSekai 欢迎您，祝您好运和耐心学习 CSS / HTML / JS 编码；)

【解决方案2】：

这是一种非常奇怪的代码编写方式，但不管你的船如何。我不会尝试更改您的所有代码，因为这不是问题的一部分。

由于间隔时间完全相同，您可以只使用一个来做您想做的事：

<html>
<head></head>
<body>
      <p style="font-size: 20px; font-family: SF Compact Display;">In your region:</p>
      <script type="text/javascript">
         document.write ('<p><span id="date-time">', new Date().toLocaleString(), '<\/span><\/p>')
      </script>

      <p style="font-size: 20px; font-family: SF Compact Display;">In Japan:</p>

      <script type="text/javascript">
         var asiaTime = new Date().toLocaleString("en-US", {timeZone: "Asia/Tokyo"});
         asiaTime = new Date(asiaTime);

         var options = {dateStyle: 'medium', hour:'numeric', minute:'numeric', second:'numeric'}
         console.log('Asia time: '+asiaTime.toLocaleString(options))
         document.write ('<p><span id="japantime">', asiaTime, '<\/span><\/p>')

         if (document.getElementById) onload = function() {
           setInterval(function () {
             var asiaTime = new Date().toLocaleString("en-US", {timeZone: "Asia/Tokyo"});

             document.getElementById ('date-time').firstChild.data = new Date().toLocaleString();
             document.getElementById('japantime').firstChild.data = asiaTime
           }, 50)
         }
         </script>
</body>
</html>

你的 japantime 函数没有在任何地方使用，所以我删除了它。我还认为您在尝试一些事情时留下了一些代码。我试着整理了一下。

检查结果是否是您所追求的，但看起来是您想要的。

关于一次运行多个间隔，我建议你看一下这个答案，解释计时器在 JS 中是如何工作的。该页面上还有几个链接以及更多信息：

Timing in JS - multiple setIntervals running at once and starting at the same time?

【讨论】：

是的，我真的不知道如何编码，因为从来没有从适当的课程中学到东西。所以我尝试使用我在互联网上找到的内容以及我从不同来源理解的内容，所以这可能是一种非常奇怪的编码方式，但非常感谢！
不客气。但是，我不确定您为什么接受另一个答案作为正确答案，因为它从未回答为什么这两个间隔不起作用，这是您的问题。此外，任何人都可以更好地重写您的代码，但这里的重点是修复您尝试过的内容并从中学习。
嗯，这里没有“正确”的答案：它们都是非常好的答案，我从他们每个人身上学到了，所以我标记为“接受”的答案并不重要（顺便说一句，我只是删除了“接受”）