JS不会循环,在第一次循环后停止

Question

我已经编写了下面的代码,作为客户网站标题中的简单幻灯片.现在,唯一的问题是,当我把它放入for或while循环时,它会到达第一个循环的末尾,然后停止.

我已经尝试在最后一个回调中使用调用togglinga(),我已经尝试过,将整个东西包装在for和while循环中,我尝试创建一个不同的函数来调用这个函数,然后使用相同的函数名称最后回拨,但每次都得到相同的结果.我真的很感激有人把目光投向了这一点,看看他们能不能看到任何我看不到的东西......

    function triggerAnimation(){
        $("#logoareacontainer").delay(15000).fadeOut(3000, function() {
            $("#title-1").fadeIn(0).delay(0, function() {
                $("#cdsl-1-1").fadeIn(1000).delay(2000).fadeOut(0, function(){
                    $("#cdsl-1-2").fadeIn(0).delay(2000).fadeOut(0, function(){
                      $("#logoareacontainer").fadeIn(1000).css({display:'block'})
                    })
                })
            })
        })
    }

Answer 1

如果将其分解为可以以循环方式调用的函数,则更短更容易.

请注意,.delay()不接受回调函数,这是问题的一个重要部分.

这是一个演示: http : //jsfiddle.net/kjaHZ/

// for each "title-", keep track of how many "cdsl-"s there are
var titles = [null, 4, 2, 2, 2, 1, 1];

start();

// start it off
function start() {
    $("#logoareacontainer").delay(1500).fadeOut(3000, function () {
        doTitle(1);
    });
}

// this starts a "title-" section
function doTitle(i) {
    if (i < titles.length) {
        // do the "title-" for the given "i" variable
        $("#title-" + i).fadeIn(0, function () {
            // after fading in, do the "cdsl-" ids
            doCDSL(i, 1);
        });
    } else {
        // or if "i" is >= titles.length, we're done
        $("#logoareacontainer").fadeIn(1000).css({display:'block'});
    }
}

// this starts a "cdsl-" section
function doCDSL(i, j) {
    $("#cdsl-" + i + "-" + j).fadeIn(1000)
    .delay(2000)
    .fadeOut(0, function () {
        if (j < titles[i]) {
            // move to the next "cdsl-"
            doCDSL(i, j+1);
        } else {
            // or do the next "title-"
            $("#title-" + i).fadeOut(1000).css({display:'none'})
            doTitle(i+1);
        }
    })
}