javascript - 将 setTimeout 换成 setinterval，谁能帮我解决这个问题

Question

我目前正在构建测试网站，以帮助我更多地了解编码，并尝试更好地掌握这一切是如何组合在一起的。

我的问题是——我在网站的某个部分有很多引述，它们淡入然后向上滑出 View ，显示一条新引述。这是我犯了错误。我把它设置得很完美，这样它就会循环遍历所有的引号……然后停止。我希望他们重复一遍。我知道我的错误是使用 .setTimeout 函数而不是 setInterval 代码。

我的问题是，是否有一个简单的解决方案来交换代码，我花了很长时间来解决这个问题，哈哈

这是代码供您查看。任何帮助将不胜感激。

$(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); 


});     

非常感谢

Answer 1

您可以将所有 block 名称移动到一个堆栈中并使用一个函数:

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