在 '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

Promises 不会神奇地停止您的 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() 在开始下一个效果之前等待效果完成

Using Jquery promise() in 'for' loop to wait for effect to finish before starting next effect

javascript

jquery

jquery-ui

promise

jquery-deferred