Question

我想使用将全天候运行的Raspberry Pi在显示器上显示包含一些可视数据的网页。网页有一个div层（比如它的#div），我希望它每隔5秒循环一些网页。每个页面都只有一个用Google Charts制作的简单条形图。

一切看起来都很好用，但我认为代码会造成内存泄漏。几个小时后，网络浏览器（铬）将崩溃并说内存不足。

如果有人可以查看我的代码并帮助我改进它，我会非常感激。

这是我正在使用的代码：

<script type="text/javascript">
    function updateChart1() {
        $.get("chart1.php", function(data) {
        $("#div").html(data);
        window.setTimeout(updateChart2, 5000);
        });
    }
    function updateChart2() {
        $.get("chart2.php", function(data) {
        $("#div").html(data);
        window.setTimeout(updateChart3, 5000);
        });
    }
    function updateChart3() {
        $.get("chart3.php", function(data) {
        $("#div").html(data);
        window.setTimeout(updateChart4, 5000);
        });
    }
    function updateChart4() {
        $.get("chart4.php", function(data) {
        $("#div").html(data);
        window.setTimeout(updateChart1, 5000);
        });
    }
    $(document).ready(updateChart1);
</script>

Answer 1

我希望您可以使用<iframe>代替该div。如果是这样的话，这就是你所拥有的：

HTML：

<iframe id="iframe" src="" />

JS：

<script type="text/javascript">
    var tm = null;
    function updateChart1() {
        $("#iframe").attr("src", "chart1.php");
        if(tm) clearTimeout(tm);
        tm = window.setTimeout(updateChart2, 5000);
    }
    function updateChart2() {
        $("#iframe").attr("src", "chart2.php");
        if(tm) clearTimeout(tm);
        tm = window.setTimeout(updateChart3, 5000);
    }
    function updateChart3() {
        $("#iframe").attr("src", "chart3.php");
        if(tm) clearTimeout(tm);
        tm = window.setTimeout(updateChart4, 5000);
    }
    function updateChart4() {
        $("#iframe").attr("src", "chart4.php");
        if(tm) clearTimeout(tm);
        tm = window.setTimeout(updateChart1, 5000);
    }        
    $(document).ready(updateChart1);
</script>

（代码可以重构为可以像其他人所说的那样重用，但这不会影响性能，因此对问题没有意义）。

这样iframe将有自己的内存处理，你不会对你的主页内存进行轮询，iframe每次都会重新加载，但它不会影响你的主页面UI完全重新加载。

以防万一，我正在清除超时，但主要的改进是iframe。

来自玻利维亚拉巴斯的欢呼声

每5秒jQuery $ .get（）不同的页面

1 个答案: