Question

我一直在寻找几个小时的答案，似乎我的问题是关闭。我无法弄清楚如何在我的场景中修复它。我想在6个元素上触发一个动画onload，相隔1000毫秒。我无法使setTimeout方法正常工作。请帮忙！

$(document).ready(function() {
    we();
});

var data = ['450px', '300px', '200px', '120px', '250px', '320px'];
var bars = $('.bar');
var i = 0;

function grow(size, elem) {
    $(elem).animate({
        height: size,
        opacity: '1.0'
    }, 1000);
}


function we() {

    setTimeout (function(){ // if I don't use an annonymous function call here, they all animate at the same time
        grow(data[i], bars[i]);
    }, 1000);

    if (i >= bars.length) {
        return;
    } else {
        i++;
        return we();
    };
}

Answer 1

你必须将setTimeout放在你的其余功能上;不只是致电grow。

function we() {
    setTimeout (function(){
        grow(data[i], bars[i]);

        if (i >= bars.length) {
            return;
        } else {
            i++;
            return we();
        };
    }, 1000);
}

我认为您错过的是setTimeout不会阻止您的计划。它不会停止执行，等待1000毫秒然后继续。相反，它将延迟执行匿名函数1000毫秒，但程序的其余部分将继续立即执行。程序的那一部分将再次调用we，并安排一个新动画（几乎与最后一个动画同时）。然后是另一个等等。

通过将递归调用放在setTimeout中，我们也会延迟递归，从而延迟所有未来的动画步骤。

经过数小时的研究后，setTimeout无法正常工作。

1 个答案: