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

JS will not loop, stops after first loop

本文关键字：循环 第一次 JS      更新时间：2023-09-26

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

我试过在上一次回调中使用调用togglinga（），我试过将整个过程包装在for and 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'})
                    })
                })
            })
        })
    }

如果将其分解为可以以循环方式调用的函数，则会更短、更容易。

请注意，.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);
        }
    })
}

尽管你的代码很糟糕，但你是：）你错过了()

function togglinga(){ triggerAnimation(); };

不能将代码放入循环中，因为它是异步的。循环只会一次启动所有动画，因为最外层的调用不会等到所有动画完成。

在最内层，只需调用triggerAnimation即可使其重新启动。

相关文章：