jquery div refresh with included PHP files

Question

I am using this code to constantly refresh divs with PHP included files in:

$(document).ready(function() {
setInterval(function() {
     $('#ContentLeft').load('live_stats1.php').fadeIn("slow");
     $('#ContentRight').load('live_stats2.php').fadeIn("slow");
}, 2000);

});

my HTML looks like:

<div id="ContentLeft">
<?php include 'live_stats1.php'; ?>
</div>

<div id="ContentRight">
<?php include 'live_stats2.php'; ?>
</div>

When i look in the console in Google Chrome is shows the live_stat1.php and live_stats2.php pages constantly loading, will this cause problems as they are constantly refreshing and slow down the internet/use a lot of bandwidth on the internet connection it is running on?

This seems an inefficient way to update a page. Read up on node.js to see other ways to update a page in real time. — Jordan
– Jordan, Commented Mar 10, 2014 at 20:29

Pattle · Accepted Answer · 2014-03-10 20:20:36Z

It depends on the amount of processing that is being done in live_stats1.php and live_stats2.php I'm guessing because you are loading stats of some kind you may be doing quite a few database queries in those scripts.

I think 2 second is a very short interval and I would think about increasing this. Do someone benchmarking on how long those scripts take to complete and find the optimum interval time.

As you are using .load() you could think about adding a callback when its complete and set a variable. Then on each loop your could check to see if the previous load has finished. Because there is no point trying to keep loading a script that hasn't had time to finish

var contentLeftLoaded = true;
var contentRightLoaded = true;
setInterval(function() {

    //Has content loaded from previous request
    if(contentLeftLoaded) {
        contentLeftLoaded = false;
        $('#ContentLeft').load('live_stats1.php', function() {
            $('#ContentLeft').fadeIn("slow");
            contentLeftLoaded = true;
        });
    }
    if(contentRightLoaded) {
        contentRightLoaded = false;
        $('#ContentRight').load('live_stats2.php', function() {
            $('#ContentRight').fadeIn("slow");
            contentRightLoaded = true;
        });
    }
}, 2000);

Collectives™ on Stack Overflow

jquery div refresh with included PHP files

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related