jQuery - множественный конфликт setInterval

Question

Я новичок в jQuery, и каждое из следующих приложений прекрасно работает самостоятельно, но теряет время при совместной работе.Что я делаю неправильно?Любые улучшения в коде тоже будут оценены ... Он должен использоваться для поворота рекламы.

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

Используйте один setInterval.Вы можете привести код в порядок таким образом:

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

Если вы уже используете jQuery, проверьте этот плагин http://plugins.jquery.com/project/timers. Известно, что наличие нескольких таймингов setintervterval иногда вызывает некоторые проблемы.Поэтому, если вы исправите свой код, как предлагает Исаак, и обнаружите, что он по-прежнему не работает, попробуйте следующее: вместо создания нескольких таймеров я бы сделал 1 функцию планировщика, которая срабатывает с наименьшей задержкой (в данном случае 2000), а затем поставил счетчик, которыйувеличивается на 2000 каждый раз и делает что-то вроде if ((counter% 2000) == 0) {action1code;} if ((counter% 6000) == 0) {action2code} if ((counter% 10000) == 0) {action3code}

Надеюсь, это понятно, я не очень разбираюсь в данный момент:)

ОБНОВЛЕНИЕ: Ну, я не могу проверить это без вашего кода или написания целой связки самостоятельноно я считаю, что это может сработать для вас (хотя моя концентрация сегодня довольно низкая, поэтому я, возможно, пропустил что-то очевидное; D).Замените весь приведенный выше код следующим:

 <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 Не забудьте очистить кеш вашего браузера и убедиться, что ваши .cfm меняются, как вы и предполагали, если к ним обращаются напрямую из браузера.