jquery - jQuery-多个setInterval冲突

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

最佳答案

使用单个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);
});