jQuery - Multiple setInterval Conflict

Question

I am a jQuery novice and each of the following work fine on their own, but get out of time when working together. What am I doing wrong? Any improvement on the code would be appreciated too... It is to be used to rotate advertising.

<!--- Header Rotator --->
<script type="text/javascript">
$(document).ready(function() {
    $("#header").load("header.cfm");
    var refreshHeader = setInterval(function() {
        $("#header").load("header.cfm");
    }, 10000);
});
</script>
<!--- Main Rotator --->
<script type="text/javascript">
$(document).ready(function() {
    $("#main").load("main.cfm");
    var refreshMain = setInterval(function() {
        $("#main").load("main.cfm");
    }, 5000);
});
</script>
<!--- Footer Rotator --->
<script type="text/javascript">
$(document).ready(function() {
    $("#footer").load("footer.cfm");
    var refreshFooter = setInterval(function() {
        $("#footer").load("footer.cfm");
    }, 2000);
});
</script>

Answer 1

If your using jQuery already check out this plugin http://plugins.jquery.com/project/timers , Having multiple setintervterval timings is known to have some issues sometimes. So if you fix your code like Isaac suggests and you find it still dosen't work try this: Instead of making multiple timers I would make 1 scheduler function that fires at your lowest delay(in this case 2000) and then put a counter that increments by 2000 each time and do something like if((counter % 2000) == 0){ action1code;} if((counter % 6000) == 0) { action2code} if((counter % 10000) == 0) { action3code}

Hope that's clear, I'm not to sharp at the moment :)

UPDATE: Well I can't test this without having either your code, or writing a whole bunch myself but I believe this might work for you (although my concentration today is pretty low so I may have missed something obvious ;D ). Replace all your code above with this:

 <script type="text/javascript">
 count = 10000; // this is so it will load everything the first time through.
 function timerFired () {
      if((count % 2000)==0){
           $("#footer").load("footer.cfm");
      }
      if ((count % 6000)==0) {
           $("#main").load("main.cfm");
      }
      if ((count % 10000)==0){
           $("#header").load("header.cfm");
           count =0;
      }
      count = count + 2000;
 }
 $(document).ready(function() {
     var refreshHeader = setInterval(timerFired(),2000);
  });
 </script>

P.S. Don't forget to clear your browsers cache and make sure your .cfm's are changing as you intended if accessed directly from the browser.

Answer 2

Use a single setInterval. You could tidy up the code thus:

$(document).ready(function() {
     refreshCounter = 0;
     $("#header").load("header.cfm").data({refresh: 10});
     $("#main"  ).load("main.cfm"  ).data({refresh:  5});
     $("#footer").load("footer.cfm").data({refresh:  2});
     var refreshHeader = setInterval(function() {
         refreshCounter++;
         $("#header, #main, #footer").each(function(){
             var $this   = $(this);
             var refresh = $this.data('refresh');
             if ((refreshCounter % refresh) == 0) {
                 var cfmFile = this.id + '.cfm';
                 $this.load(cfmFile);
             }
         });
     },
     1000);
});