JavaScript setInterval() and setTimeout() freezing browser

Question

I'm woking in a mobile friendly monitoring tool based on rrdtool.

All working fine but when I have the webpage opened for more that 1 hour freezes my computer.

I use this snippet for refresh the images.

<?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>";


?>

I include this php file in the pages what I have images and I want to refresh.

I tried the 2 options but as I said, freezes my browser.

Anyone have idea what can I do? Because I need refresh the images only, I don't want to refres the whole page.

EDIT

Here is the PHP script for print all images in database.

<?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();

Take a look at this: http://stackoverflow.com/questions/14034107/does-javascript-setinterval-method-cause-memory-leak — Jeremy Harris, Aug 04 '16 at 16:52
It would be really great to see a full html page which gets rendered and sent to the client. Anyway, my first thought is the you (or your current browser) have a memory leak. Try to monitor how much resources your browser consumes every other 10 minutes. — Kirill Rogovoy, Aug 04 '16 at 16:54
Maybe trying to do what @KirillRogovoy suggested and if your browser is consuming a lot of resources trying to cleanInterval and restart the interval again? — Slico, Aug 04 '16 at 17:06
I just added the php code. @Slico as I saw the problem is when the browser tab is not focused the javascript is cached and when I try to reopen the tab, start doing all the cached pollers. I tried with Safari, Chrome and Firefox. — Radu Radu, Aug 05 '16 at 06:14

score 2 · Accepted Answer · answered Aug 05 '16 at 06:19

2

You have this onload handler for your image:

refreshIt(this)

...and that sets an interval (meaning it will repeat) every 50 seconds. The callback for that interval sets the src for the image, which means that onload will once again trigger, and you'll again do a set interval. So each time a new version of the image loads, you add another interval, so eventually you'll have tons of duplicating callbacks occurring.

You probably want to use setTimeout, or call refreshIt(this) once, not on every onload.

answered Aug 05 '16 at 06:19

Jacob

77,566
24
149
228

Thanks for your answer Jacob. I tried the setTimeout function (the commented one in the post) but still unsuccessful. As I understand, the problem here is passed 1 hour I have 72 callbacks for a single image source? If I reset the counter will do the work? – Radu Radu Aug 05 '16 at 06:34
1

If you use `setTimeout` and only call it after the last image has loaded, you'll only have one active timer at a time, so that shouldn't be the case. Your previous example called `refreshIt` internally, so that coupled with the `onload` which would have fired each time would have caused the duplicated timeouts. Just get rid of the `refreshIt` call in one place or the other. – Jacob Aug 05 '16 at 06:39
Ok, I tried this `` – Radu Radu Aug 05 '16 at 07:23
Ok, It's working perfectly, Thanks you Jacob. All this for a simple line! – Radu Radu Aug 05 '16 at 10:52

JavaScript setInterval() and setTimeout() freezing browser

EDIT

1 Answers1