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

承诺不是奇迹般地停止你的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>