Question

我试图在一个循环中调用一个函数，当函数完成执行时，循环继续到下一次迭代并再次调用它。但是循环不会等待函数完成，而是调用函数的4个实例并同时运行它们！我应该把整个函数放在循环中还是让循环等待函数执行？感谢

    for (var i=2; i<=4; i++){
        galleryAnimation(i); //This is executed 3 times at once
    }
    function galleryAnimation(i){
        $("#pic" + i).delay(delayTime).fadeIn(duration);
    }

Answer 1

该函数正在按照您的要求执行3次，问题是延迟和淡入淡出使用定时器：它们将在执行函数时设置定时器并立即返回：它们是非定时器阻止通话。因此，在你的情况下，因为你正在调用函数3次，比如说，0.0001s，0.0002s和0.0003s，这三个函数可以说是5.0001,5.0002和5.0003。

您的想法是阻止调用这些功能。您希望整个执行停止，直到动画完成。这将持续整个浏览器Javascript引擎，这意味着没有其他动画或用户javascript交互是可能的。

要解决此问题，您必须使用回调。您可以为动画完成后调用的fadeIn提供一个函数：

http://api.jquery.com/fadeIn/

您可以使用队列在延迟（）上模拟相同的内容：

Callback to .delay()

Answer 2

简单解决方案：每次都将延迟增加一倍。

var i, factor, 
    duration = 250,
    delayTime = 500;

for (i = 2, factor = 0; i <= 4; i++, factor++) {
    galleryAnimation(i, factor);
}

function galleryAnimation(i, factor) {
    $("#pic" + i).delay(factor * delayTime).fadeIn(duration);
}

这与您的方法运行方式相同，只是每次延迟都会延长。

通用解决方案1 - 与setInterval()一起使用，以便在预定义的时间间隔内调用您的工作函数（执行fadeIn的函数）：

var elements = $("#pic2,#pic3,#pic4").toArray(),   // or any other way to select your elements
    duration = 250,
    delayTime = 500,
    intervalId = setInterval(function () {
        $(elements.shift()).fadeIn(duration);
        if (elements.length === 0) {
            clearInterval(intervalId);
        }
    }, delayTime);

通用解决方案2 - 使用上一个动画结束时调用的回调：

var elements = $("#pic2,#pic3,#pic4").toArray(),   // or any other way to select your elements
    duration = 250,
    delayTime = 500,
    next = function () {
        $(elements.shift()).delay(delayTime).fadeIn(duration, next);
    };

next();  // start the chain

Answer 3

您可以做的一件事是使用标识符（布尔值），然后在循环中测试标识符以确定循环是否可以继续或停止。例如， function galleryAnimation(i, iBool){ $("#pic" + i).delay(delayTime).fadeIn(duration); iBool = 0; }

然后回来;

for (var i=2; i<=4; i++){
    galleryAnimation(i, iBool); 
    // If iBool = 0 then continue
    // Else Break
}

这可能是一个解决方案，因为循环将需要返回值来确定下一步，继续或中断。

Answer 4

我带来了自己的解决方案，似乎完美无缺，这是我的代码：

function fadeInAnimation(index){
        $("#pic" + index).delay(delayTime).fadeIn(duration, function(){
            photoIndex();
        });
    }

    function photoIndex(){
        index++;
        fadeInAnimation(index);
    }
    fadeInAnimation(index);
});

我已经意识到使用循环对于这样的事情是一个非常糟糕的主意。这段代码允许我只是通过在文件夹中重命名它们来添加任意数量的图像，而不是手动编码它们作为每张照片的回调。谢谢那些回答的人。您的建议很棒，并且肯定会在其他应用程序中记住这些建议

在javascript中循环调用函数

4 个答案: