2

我一直在寻找几个小时的答案，看来我的问题在于关闭。我无法弄清楚如何在我的场景中修复它。我想在 6 个元素上触发动画加载，相隔 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();
    };
}
4

1 回答 1

5

您还必须将您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，我们也延迟了递归，从而延迟了所有未来的动画步骤。

于 2013-03-08T06:42:52.160 回答