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