Мой JavaScript виджет часов вылетает Firefox - PullRequest
Новая
       31

Мой JavaScript виджет часов вылетает Firefox

0 голосов
/ 11 февраля 2020

Я JavaScript новичок и понимаю, что мне нужна помощь.

Все, что я хочу, это показать простые часы реального времени со временем и AM / PM в отдельных SPAN.

Проблема в том, что если я оставляю вкладку открытой в течение 20-40 минут (зависит от того, сколько других вкладок у меня открыто), происходит сбой вкладки с ошибкой нехватки памяти. Я только что проверил это на Firefox (72.0.2).

Почему мой код так ужасно интенсивно использует память? Обычно он начинается с 2,4 МБ, а затем постепенно увеличивается и превышает 42 МБ, затем снова падает, снова увеличивается и повторяет цикл несколько раз, пока не произойдет сбой вкладки.

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

Обратите внимание, что я пытался поменять setInterval с setTimeout, но это тот же результат.

Это мой JavaScript: 

window.onload = function() {
  clock();

  function clock() {
    var now = new Date();
    var TwentyFourHour = now.getHours();
    var hour = now.getHours();
    var min = now.getMinutes();
    var sec = now.getSeconds();
    var mid = 'PM';

    if (min < 10) {
      min = "0" + min;
    }
    if (hour > 12) {
      hour = hour - 12;
    }
    if (hour == 0) {
      hour = 12;
    }
    if (TwentyFourHour < 12) {
      mid = 'AM';
    }

    document.getElementById('time-core').innerHTML = hour + ':' + min;
    setInterval(clock, 1000);
    document.getElementById('time-suffix').innerHTML = mid;
    setInterval(clock, 1000);
  }
}

А это мой HTML: 

<span class="show-time" id="time-core"></span><span class="show-time-suffix" id="time-suffix"></span>

Спасибо!

1 Ответ

1 голос
/ 11 февраля 2020

Как сказал Андреас в своем комментарии:

Каждый вызов clock () добавляет два новых интервала, которые каждый будет вызывать clock (). Итак, после первого раунда у нас есть два запланированных вызова clock (), затем 4, затем 8, затем ...

Один из способов решить эту проблему - удалить setInterval изнутри clock функция, как в примере ниже. 

window.onload = function() {
  clock(); // Run it first so we don't have to wait 1 second
  setInterval(clock, 1000); // Updates the clock every second

  function clock() {
    var now = new Date();
    var TwentyFourHour = now.getHours();
    var hour = now.getHours();
    var min = now.getMinutes();
    var sec = now.getSeconds();
    var mid = 'PM';

    if (min < 10) {
      min = "0" + min;
    }
    if (hour > 12) {
      hour = hour - 12;
    }
    if (hour == 0) {
      hour = 12;
    }
    if (TwentyFourHour < 12) {
      mid = 'AM';
    }

    document.getElementById('time-core').innerHTML = hour + ':' + min;
    document.getElementById('time-suffix').innerHTML = mid;
  }
}
...