在“for”循环中使用 Jquery promise() 等待效果完成，然后再开始下一个效果

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>