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 时间有时会出现一些问题。因此，如果您像 Isaac 建议的那样修复您的代码，但您发现它仍然无法正常工作，请尝试以下操作：我不会制作多个计时器，而是制作 1 个调度程序函数，它会在您的最低延迟（在本例中为 2000）触发，然后放置一个计数器每次递增 2000 并执行类似 if((counter % 2000) == 0){ action1code;} if((计数器 % 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>

附：如果直接从浏览器访问，请不要忘记清除您的浏览器缓存并确保您的 .cfm 正在按照您的预期进行更改。