Использование Jquery для загрузки одного html-файла, задержки, затем другого, looping

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