将setTimeout交换为setinterval，有人可以帮助我解决此问题吗

Question

Im currently in the middle of building test websites to help me understand coding more and try and get a better grasp of how it all comes together.

My problem is this - I have a section of the site with a number of quotes, they fade in then slide up out of view revealing a new quote. This is were is I have made the mistake. I have it set perfectly so that it will cycle through all the quotes...but then stop. I would love them to repeat. I know my mistake is using the.setTimeout function instead of the setInterval code.

My question is this, is there an easy solution to swapping the code, Its taken me a good while just to wrap my head around this lol

Here is the code for you to look at. Any help would be greatly appreciated.

$(function(){
setTimeout(function()
    {
    $("#jobs_1").slideUp(800);
    }, 4000); 
});
$(function(){
setTimeout(function()
    {
    $("#jobs_2").fadeIn(400);
    }, 4800); 
}); 
$(function(){
setTimeout(function()
    {
    $("#jobs_2").slideUp(800);
    }, 8000); 
});
$(function(){
setTimeout(function()
    {
    $("#jobs_3").fadeIn(400);
    }, 8800); 
});     
$(function(){
setTimeout(function()
    {
    $("#jobs_3").slideUp(800);
    }, 12000); 
});
$(function(){
setTimeout(function()
    {
    $("#jobs_4").fadeIn(400);
    }, 12800); 
});
$(function(){
setTimeout(function()
    {
    $("#jobs_4").slideUp(800);
    }, 16000); 
});
$(function(){
setTimeout(function()
    {
    $("#jobs_1").fadeIn(400);
    }, 16800); 


});     

Many Thanks

Answer 1

This should help you. How it works? You set the current job counter to 0. Then, using setInterval, every 3 seconds you run the main function, which increments the job counter. If the counter exceeds 4 (your last job), hide job 4 and fade int he first one. Otherwise slide out the previous job and fade in the new one.

$(function(){
    count = 1;

    x = setInterval(function(){
        count++;
        if( count > 4) {
            $('jobs_4').hide(function(){
                $('#jobs_1').fadeIn();
            });

            count = 1
        } else {
            $('#jobs_' + (count-1)).slideUp(function(){
                $('#jobs_' + (count-1)).fadeIn();
            });
        }

    }, 3000);
}

Answer 2

You can move all your block names into a stack and use one single function:

var blocks = ['jobs_1', 'jobs_2', 'jobs_3', 'jobs_4'];
var curentBlockIndex = 0;
setInterval(function(){
    var nextBlockIndex = curentBlockIndex + 1;
    if (nextBlockIndex >= blocks.length) nextBlockIndex = 0;
    $('#' + blocks[curentBlockIndex]).slideUp(800, function(){
        $('#' + blocks[nextBlockIndex]).fadeIn(400);
    });

    curentBlockIndex = nextBlockIndex;
}, 4000);