jquery - 使用 Jquery 加载一个 html 文件，延迟，然后是另一个，循环

Question

我想展示一个 html 文件。然后淡入另一个。这是我的代码，它可以工作，除了第一次，它会等待 10 秒才能切换。然后在切换之后，它在切换之间等待 5 秒。我对 jquery 如何处理超时和等待有点困惑。我想每次切换等待 5 秒，从第一个切换开始。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
        $("#responsecontainer3").load("ad1.html");
  var refreshId = setInterval(function() {
     $("#responsecontainer3").fadeTo("slow").load('ad1.html?randval='+ Math.random());

setTimeout(function() 
  { 
     $("#responsecontainer3").fadeTo("slow").load('ad2.html?randval='+ Math.random());
  }, 5000); 

 }, 10000);


});
</script>
<div id="responsecontainer3">
</div>

Answer 1

<script>
 $(document).ready(function() {
        $("#responsecontainer3").load("ad2.html");

   var index = 1;
   var refreshId = setInterval(function() {
      $("#responsecontainer3").load('ad'+index+'.html');
      index = (index == 2)? 1 : index+1;
   }, 5000);
   $.ajaxSetup({ cache: false });
});
</script>

Answer 2

function loadFile(url) {
   $("#responsecontainer3").load(url, function() {
       var index = parseInt( url.replace('ad','').replace('.html','') );
       $("#responsecontainer3").fadeTo('slow', function() {
         setTimeout(function() {
             index++;
             loadFile('ad'+index+'.html');
         }, 5000)
       });
   });
}

loadFile('ad1.html');