JavaScript函数驱动CPU利用率到100%

JavaScript function driving CPU utilization to 100%

本文关键字：利用率 100% CPU 函数 JavaScript      更新时间：2023-09-26

我有一系列图像，其中图形温度，湿度等。镜像文件名不变，但镜像本身每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>

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

setInterval(dispGraphs, 300000);

在每个循环中，您再次调用它，并以无限次调用函数dispGraphs结束

用setTimeout代替setInterval。

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(); 
    setTimeout(dispGraphs, 300000);    
}

CPU达到100%，因为每次调用dispGraphs函数时都会创建一个新的间隔，每5分钟调用一次该函数。所以5分钟后，你将有2个间隔(第一次调用时创建的间隔和5分钟后创建的间隔)，10分钟后，你将有4个间隔，每个间隔每5分钟调用一次函数。所以间隔的数量与经过的时间成指数关系nrIntervals = 2 ^ (minutesPassed/5)(或类似的东西)。

使用setTimeout你可以确保你的函数每5分钟只被调用一次。

function dispGraphs() {
  setInterval(function () {
    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(); 
  }, 300000);
}
相关文章：