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

结束

Answer 2

只需使用setTimeout setInterval的{{1}}内容。

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分钟只调用一次。

Answer 3

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

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

3 个答案: