JavaScript setInterval()和setTimeout()冻结浏览器

JavaScript setInterval() and setTimeout() freezing browser

本文关键字:冻结 浏览器 setTimeout JavaScript setInterval      更新时间:2023-09-26

我正在开发一个基于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文件,我有图像,我想刷新。

我尝试了这两个选项,但正如我所说,冻结了我的浏览器。

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

编辑

这是用于打印数据库中所有图像的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();

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

refreshIt(this)

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

您可能想要使用setTimeout,或者调用refreshIt(this)一次,而不是每次调用onload