在javascript中循环调用函数

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

简单的解决方案：每次将超时增加一个因子。

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