JQuery - multiple setInterval Conflict

Question

I am starting jQuery and each of these works fine on its own, but not working together. What am I doing wrong? Any code improvement would also be appreciated ... It should be used to turn ads.

<!--- 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

Use one setInterval . You could tidy up the code this way:

 $(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); }); 

Answer 2

If your jQuery already checks this plugin http://plugins.jquery.com/project/timers , then, as you know, sometimes it has several timings setintervterval. Therefore, if you correct your code, as Isaac suggests, and you find that it still does not work, try this: instead of creating several timers, I will make 1 scheduler function that works at the lowest delay (in this case 2000), and then set a counter that is multiplied by 2000 each time and does something like if ((counter% 2000) == 0) {action1code;} if ((counter% 6000) == 0) {action2code} if ((counter% 10000) == 0) {action3code}

Hope this is clear, I don’t want it right now :)

UPDATE: I can't check this without your code or write a whole bunch, but I believe that this might work for you (although my concentration is pretty low today, so I might have missed something obvious, D), Replace your whole code above:

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

PS Remember to clear your browsers cache and make sure that your .cfm changes as you planned if you are accessing directly from the browser.