jquery ajax load with delay - php div rotation - php

Question

Hope someone can help. I am new to javascript so please forgive any mistakes. I am trying to achieve the following:
I have an index page with an html table, split up into four quarters. Each quarter has a DIV ID, and an ajax load via jquery will reload individual DIV's with a PHP page sucessfully, after a certain delay.
What I am trying to do, is for one of the quarters, rotate three PHP pages in the DIV every 15 minutes, and keep looping. I had setup an array with three php sites in, and sucessfully used this with a counter variable to call the relavent entries in the array via jquery. If I put in the count number in the ajax code it works. I am now struggling to see how I can increment the counter, and also reset it once it has reached the third page.
I do not know if I can use the ajax.complete function to assist, as I dont know if I can put "standard" javascript inside this function.
Thanks for any assistance - my code is below:
var count = 0;
var page = new Array("page1.php","page2.php","page3.php");
var delay = ("9000");
(
function($)
{
$(document).ready(function()
{
$.ajaxSetup(
{
cache: false
});
var $container = $("#DivID");
$container.load(page[count]);
var refreshId = setInterval(function()
{
$container.load(page[count]);
}, delay);
});
})
(jQuery);

Answer 1

try this
var refreshId = setInterval(function()
{
$container.load(page[count]);
count = (count+1) % 3
}, delay);
This way when count reaches 3 it will be reset to 0. Percent sign is the module division

Answer 2

Do not use Set Interval.
it will lag and chain if the page load is slow, crashing your site
use setTimeout:
setTimeout(function_name, delay);
var function_name = function() {
$container.load(page[count], function(){
count = (count+1) % 3;
setTimeout(function_name, delay);
});
}
this way, the timeout isn't chained, it fires once the page load is completed