Why is my first setInterval stoping while the second one keeps running?

Question

I want to show two times: the one in your country and the one in Japan with JS
The problem is that the second setInterval stops the first one and I don't know how to make both runs.

The full code

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

If someone could help me it will be super cool!

A new `setInterval` does *not* stop an earlier one. I think the two are happening very quickly and you only see the results of one. `setInterval` returns a ID and you can use that stop on interval before starting the next. That said, `setTimeout` tends to be a better choice most times, but you do need to manually re-run it on every loop interation. — Jeremy J Starcher, Dec 22 '19 at 22:04
Well in fact I'm doing something like that : [link](https://streamable.com/mwgce) — Anime no Sekai, Dec 22 '19 at 22:08
@JeremyJStarcher but with the time running under "In your region:" — Anime no Sekai, Dec 22 '19 at 22:11
But why do you even need two `setIntervals` at all? You can put all your code in a single `setInterval`. And why does it need to go so fast? — Kokodoko, Dec 22 '19 at 22:17
The code in your link is very different from the code in your question. If you want useful answers, you must ask the best questions possible. You may even update the question as needed. — Jeremy J Starcher, Dec 22 '19 at 22:18
@JeremyJStarcher as you can see when you run the code snippet, it's the same code used in my question and in the video — Anime no Sekai, Dec 22 '19 at 22:35

Dimitrios Matanis · Answer 1 · 2019-12-22T22:37:19.587

This is a very weird way of writing the code but whatever floats your boat. I will not try to alter all of your code since this is not part of the question.

Since the time on the intervals is exactly the same, you can use just one to do what you want:

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

Your japantime function was not being used anywhere so I removed it. I also think you had some left over code from trying out a few things. I tried to tidy it up a bit.

Check if the result is what you were after but it looks like this it what you want.

As for running several intervals at once, I suggest you take a look at this answer, explaining how timers work in JS. There are several links on that page with more info as well:

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

Yea I don't really know how to code because never learned from a proper lesson. So I try with what I find on the internet and what I understand from different sources so it might be a very weird way of coding but thank you very much! — Anime no Sekai, Dec 22 '19 at 22:39
You are welcome. I am not however sure why you accepted the other answer as the correct one, as it never answered why the two intervals were not working which was your question. Also, anyone could just re-write your code better, but the point here is to fix what YOU tried and learn from it. — Dimitrios Matanis, Dec 22 '19 at 22:45
Well here there is no 'correct' answer: they are both very nice answers and I learned from each of them so it doesn't really matter the one I mark as 'accepted' (btw I just removed the 'accepted') — Anime no Sekai, Dec 22 '19 at 22:51

score 1 · Answer 2 · answered Dec 22 '19 at 22:33

Please use the same setInterval for both.
+ don't mix css / html / JS in your code.
..... ( Each one in his place, (js just before </body> )
+ 1000 milisecond is better

final code looks like:

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

test:

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>

Thank you very much, your code is 100x more understandable than mine!!!! — Anime no Sekai, Dec 22 '19 at 22:44
@AnimenoSekai you are welcome, good luck and patience in learning coding in CSS / HTML / JS ;) — Mister Jojo, Dec 22 '19 at 22:49

Why is my first setInterval stoping while the second one keeps running?

2 Answers2