Question

我想知道为什么以下代码在循环中开始下一个动画之前不会等待动画完成。

由于某种原因，循环创建的所有元素都会立即显示并同时淡入。从代码中，我希望第一个元素在循环的第一次迭代完成之前完成淡入，然后'for'循环的第二次迭代将在下一个元素中淡出，依此类推......

我不想在创建混乱代码之前使用回调，而且我想使用一个将使用动态数据的循环 - 动画的数量会有所不同。

<div id="container"></div>

<script>
var data = [1,2,3,4]; 

for(var i = 0; i < data.length; i++){
    $("#container").append("<h1>"+data[i]+"</h1>").hide().show("fade",2000);
    $("#container").promise().done(function(){console.log('sweet');});
}
</script>

Answer 1

Promise不会神奇地停止你的for循环，他们所做的就是提供链接回调的方法。你一下子就完成了所有动画，并等待它们同时完成。要按顺序获取它们，您可以使用

<div id="container"></div>
<script>
[1,2,3,4].reduce(function(prev, d, i) {
    return prev.then(function() {
        console.log('start', i)
        return $("<h1/>", {text: d})
        .appendTo("#container")
        .hide().show("fade",2000) // I assume you meant to animate the h1, not the container
        .promise();
    }).then(function() {
        console.log('sweet! end', i);
    });
}, $.when());
</script>

在'for'循环中使用Jquery promise（）在开始下一个效果之前等待效果完成

1 个答案: