JavaScript函数将CPU利用率提高到100%

我有一系列的图像，它们描绘了温度、湿度等。图像文件名没有改变，但图像本身每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>

document.addEventListener（'DOMContentLoaded'，dispGraphs）；

一个人不应该在函数内部，而应该在函数外部

setInterval(dispGraphs, 300000);

---

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

dispGraphs

结束，该函数不应在函数内部，而应在函数外部

setInterval(dispGraphs, 300000);

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);
}

---

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

dispGraphs

结束，只需使用

setTimeout

插入

setInterval

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);
}

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分钟调用一次函数。因此，间隔的数量与经过的时间成指数关系

nrInterval=2^（通过的分钟数/5）

（或类似的东西）

---

使用

setTimeout

可以确保每5分钟只调用一次函数。

只需使用

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分钟调用一次函数。因此，间隔的数量与经过的时间成指数关系

nrInterval=2^（通过的分钟数/5）

（或类似的东西）

---

使用

setTimeout

可以确保函数每5分钟只调用一次。

函数会创建一个间隔计时器，每5分钟调用一次相同的函数。每次间隔时间到期时，都会设置另一个间隔计时器。这是一个相当长的间隔，但过一段时间后会有很多。您可能打算使用setTimeout（…）而不是setInterval（…）您的函数会创建一个间隔计时器，每隔五分钟调用同一个函数。每次间隔时间到期时，都会设置另一个间隔计时器。这是一个相当长的间隔，但过一段时间后会有很多。您可能打算使用setTimeout（…）而不是setInterval（…），使用

setTimeout

将是一个更好的解决方案，不建议使用

setInterval

。使用

setTimeout

将是一个更好的解决方案，不建议使用

setInterval

。