Почему мой первый setInterval останавливается, а второй продолжает работать? - PullRequest
Новая
       18

Почему мой первый setInterval останавливается, а второй продолжает работать?

1 голос
/ 23 декабря 2019

Я хочу показать два раза: один в вашей стране и один в Японии с 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>

Если кто-то может мне помочь, это будет очень круто!

1 Ответ

1 голос
/ 23 декабря 2019

Это очень странный способ написания кода, но все, что плавает на вашей лодке. Я не буду пытаться изменить весь ваш код, так как это не является частью вопроса.

Поскольку время на интервалах одинаково, вы можете использовать только один, чтобы сделать то, что вы хотите: 

<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. На этой странице также есть несколько ссылок с дополнительной информацией:

Время в JS - несколько setIntervals, запущенных одновременно и начинающихся одновременно?

...