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