我的JavaScript时钟小部件崩溃Firefox

我是一个JavaScript noob，意识到我需要帮助

我只想显示一个简单的实时时钟，时间和AM/PM在不同的范围内

问题是，如果我将选项卡保持打开状态20-40分钟（取决于打开的其他选项卡的数量），它会导致选项卡崩溃，并出现内存不足错误。我现在只在Firefox（72.0.2）上测试过这个

为什么我的代码会占用大量内存？它通常从2.4MB左右开始，然后逐渐增加并超过42MB，然后再次下降，再次增加，并重复该循环数次，直到选项卡崩溃

我读过垃圾收集，但不知道它是如何工作的，也不知道它是否与这个问题有关

请注意，我尝试过将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);
  }
}

window.onload=function（）{
时钟（）；
功能时钟（）{
var now=新日期（）；
var TwentyFourHour=now.getHours（）；
var hour=now.getHours（）；
var min=now.getMinutes（）；
var sec=now.getSeconds（）；
var mid='PM'；
如果（最小值<10）{
最小值=“0”+最小值；
}
如果（小时>12）{
小时=小时-12；
}
如果（小时==0）{
小时=12；
}
如果（二十四小时<12）{
mid='AM'；
}
document.getElementById（'time-core'）。innerHTML=hour+'：'+min；
设置间隔（时钟，1000）；
document.getElementById（'time-suffix'）。innerHTML=mid；
设置间隔（时钟，1000）；
}
}

这是我的HTML：

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

谢谢大家!

正如他在评论中所说：

每次调用clock（）都会添加两个新的间隔，每个间隔都将调用clock（）。所以在第一轮之后，我们有两个预定的clock（）调用，然后是4，然后是8，然后

解决这个问题的一种方法是从

clock

函数中删除

setInterval

，如下例所示

window.onload=function（）{
clock（）；//首先运行它，这样我们就不必等待1秒
setInterval（时钟，1000）；//每秒更新一次时钟
功能时钟（）{
var now=新日期（）；
var TwentyFourHour=now.getHours（）；
var hour=now.getHours（）；
var min=now.getMinutes（）；
var sec=now.getSeconds（）；
var mid='PM'；
如果（最小值<10）{
最小值=“0”+最小值；
}
如果（小时>12）{
小时=小时-12；
}
如果（小时==0）{
小时=12；
}
如果（二十四小时<12）{
mid='AM'；
}
document.getElementById（'time-core'）。innerHTML=hour+'：'+min；
document.getElementById（'time-suffix'）。innerHTML=mid；
}
}

每次调用

clock（）

都会添加两个新的间隔，每个间隔将调用

clock（）

。因此，在第一轮之后，我们有两个预定的

clock（）

调用，然后是4次，然后是8次，然后……每次间隔调用函数时，您都要设置两个新的间隔。将间隔定义从

时钟功能中拉出。更换
时钟（）使用
setInterval（时钟，1000）在顶部调用
并从函数中删除
setInterval
调用。（setInterval将一次又一次地调用您的函数，不像setTimeout那样您需要一次又一次地运行）或者删除其中一个
setInterval
s，并用
setTimeout
替换另一个，谢谢，您的救命稻草。尝试@chris-g推荐，现在已经完全稳定了。将监控碰撞。非常感谢！你是一个Jangel（JavaScript天使）。谢谢