JavaScript 函数使 CPU 利用率达到 100%

Question

我有一系列图像，其中显示了温度、湿度等。图像文件名不会更改，但图像本身每 5 分钟更新一次。我想刷新图像而不必重新加载整个页面。

下面的函数可以完成此任务，但几个周期后处理器利用率会跃升至 100%。我已注释掉页面上的所有其他内容，因此我确信尝试使用 JavaScript 函数刷新图像就是原因。

我是 JavaScript 新手，不明白为什么会发生这种情况，也不明白如何排除故障。任何帮助将不胜感激。

function dispGraphs() {

    document.getElementById("tempChart").src="images/tempInside.png?t=" + Math.random();    
    document.getElementById("humChart").src="images/humidityInside.png?t=" + Math.random();    
    document.getElementById("presChart").src="images/pressureInside.png?t=" + Math.random(); 
    document.getElementById("lightChart").src="images/light.png?t=" + Math.random(); 

    setInterval(dispGraphs, 300000);    
}

该函数被调用:

    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', dispGraphs);
    </script>

Answer 1

那个不应该在函数内部，而应该在函数外部。

setInterval(dispGraphs, 300000);

在每个周期中，您都会再次调用它，最终会无限次调用函数 dispGraphs