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つのオプションを試しましたが、私が言ったように私のブラウザはフリーズしています。

誰でも私は何ができますか？イメージをリフレッシュする必要があるため、ページ全体をリフレッシュしたくありません。

EDIT

ここには、データベース内のすべての画像を印刷するための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を使用するか、onloadに1回だけrefreshIt(this)を呼び出します。