JavaScript setInterval() 和 setTimeout() 卡住浏览器

Question

我在基于 rrdtool 的移动友好监控工具中工作。

一切正常，但当我打开网页超过 1 小时时，我的计算机会死机。

我使用这个片段来刷新图像。

<?php

if(!isset($includeCheck))
{
        exit ("No tienes permisos para ver directamente el archivo");
}

//echo "
//<script language='JavaScript'>
//        function refreshIt(element) {
//                setTimeout(function() {
//                element.src = element.src.split('?')[0] + '?' + new Date().getTime();
//                refreshIt(element);
//              }, 50000); 
//      }
//</script>";

echo "
<script language='JavaScript'>
        function refreshIt(element){
                setInterval(function() {
                element.src = element.src.split('?')[0] + '?' + new Date().getTime();
                }, 50000);
        }
</script>";


?>

我将此 php 文件包含在我有图像并想刷新的页面中。

我尝试了 2 个选项，但正如我所说，我的浏览器卡住了。

有人知道我能做什么吗？因为我只需要刷新图像，所以我不想刷新整个页面。

编辑

这是用于打印数据库中所有图像的 PHP 脚本。

<?php

if(!isset($includeCheck))
{
        exit ("No tienes permisos para ver directamente el archivo");
}

if(isset($_GET['freq'])){
        $freq = $_GET['freq'];
        $title = 'Gráficas';
} else {
        exit ("No has especificado la frecuencia");
}

if($freq == "hourly"){
$title = 'Tráfico última hora';
}

if($freq == "daily"){
$title = 'Tráfico último dia';
}

if($freq == "weekly"){
$title = 'Tráfico última semana';
}

if($freq == "monthly"){
$title = 'Tráfico último mes';
}

if($freq == "yearly"){
$title = 'Tráfico último año';
}

if(isset($_GET['limit'])){
        $limit = $_GET['limit'];
} else {
        $limit="10";
}


if(isset($_GET['inicio'])){
        $inicio = $_GET['inicio'];
}

if(isset($_GET['subpage'])){
        $subpage = $_GET['subpage'];
        if ($subpage==1) {
                $inicio=0;
        }
} else {
        $subpage = "1";
        $inicio="0";

}

$total_records = $conn->query("SELECT graph_id FROM graph_".$freq)->num_rows;
$total_pages = ceil($total_records / $limit);


$sql = "SELECT graph_desc,graph_id,graph_name FROM graph_".$freq." ORDER BY graph_desc ASC LIMIT ".$limit." OFFSET ".$inicio.";";
$result = $conn->query($sql);

include_once 'adm/includes/pagination.php';

echo "<h1 id='titulo' class=\"page-header\">".$title."</h1>";
include_once 'adm/includes/refresh.php';


if ($total_pages != '1') {
echo "<div id='pager1' class='col-md-12'>";
echo $pagLink;
echo "</div>";
}

if ($result->num_rows > 0) {
        while($row = $result->fetch_assoc()) {

                echo "
                        <div class='graphSize' style='float:left; position:relative; z-index: 10;'>
                                <a href='?page=GraphDetail&graph_id=".$row['graph_id']."&graph_desc=".$row['graph_desc']."'>
                                        <img style='width:100%' src='/graficas/".$freq."/".$row['graph_name']."' onload='refreshIt(this)'></img>
                                </a>
                        </div>
                ";


        }
}
else {
        echo "<p>No hay ninguna gráfica para mostrar</p>"; }

if ($total_pages != '1') {
echo "<div id='pager2' class='col-md-12'>";
echo $pagLink;
echo "</div>";
}

echo "</body>";

if(isset($_GET['fullscreen'])){
        echo "<style>";
        echo ".graphSize {";
                echo "width:500px;";
        echo "}";
        echo "</style>";
}

$conn->close();

Answer 1

您的图像有这个onload 处理程序:

refreshIt(this)

...并且每 50 秒设置一个间隔(意味着它会重复)。该间隔的回调设置图像的 src，这意味着 onload 将再次触发，您将再次执行设置的间隔。因此，每次加载新版本的图像时，您都会添加另一个间隔，因此最终会发生大量重复的回调。

您可能想使用 setTimeout，或调用一次 refreshIt(this)，而不是在每次 onload 时调用。