jQuery div刷新包含的PHP文件

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?

Answer 1

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