Using Jquery to load one html file, delay, then another, looping

Question

I'd like to show one html file. Then fade to another one. Here's my code and it works, except the first time, it waits 10 seconds to switch. Then after the switch, it waits 5 seconds in between switches. I'm a little confused as to how to jquery's handles timeouts and waits. I'd like to wait 5 seconds per switch, beginning with the first one.

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

thecodeparadox · Answer 1 · 2012-06-10T07:03:38.620

0

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');

edited Jun 10 '12 at 07:03

answered Jun 10 '12 at 06:55

thecodeparadox

86,271
21
138
164

@codeparadox: Thanks, it loads ad1.html but never loads ad2.html. I'm putting the code inside the $(document).ready(function(). – Josh Bond Jun 10 '12 at 16:17

score 0 · Accepted Answer · answered Jun 10 '12 at 19:34

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

Using Jquery to load one html file, delay, then another, looping

2 Answers2

Linked