지연이 for 루프에서 지연되지 않음

Question

매번 다른 메시지를 표시 할 팝업이 있습니다. 대신 .html() jQuery가 먼저 실행되고 마지막으로 표시되는 항목 만 표시됩니다.

$(document).ready(function() { 

var popArray = ["App1","app2","app3","app4","app5","app6","app7","app9","app10"]; 

for (var i = 0; i < popArray.length; i++) { 

$('.site-footer h2').html(popArray[i]); 
$('.site-footer').delay(1000).slideUp(300).delay(1000).slideDown(300); 

} 
}); 

Answer 1

여기서 가장 큰 문제는 당신은 루프에서 HTML을 업데이트하고, 애니메이션은 비동기 그래서 루프가 다음 애니메이션이 애니메이션은 h2 마지막이 시작되는 시간을 의미 시작됩니다 먼저 실행 얻을 것이다 항목을 내용으로 추가합니다.

var popArray = ["App1", "app2", "app3", "app4", "app5", "app6", "app7", "app9", "app10"]; 
$.each(popArray, function (i, v) { 
    $('.site-footer').queue(function() { 
     $(this).find('h2').html(popArray[i]); 
     $(this).dequeue() 
    }).delay(1000).slideUp(300).delay(1000).slideDown(300); 
}) 

데모 : Fiddle

Answer 2

난 당신이 여기 setTimeout 필요하다고 생각 :

이

$(document).ready(function() { 
    var popArray = ["App1","app2","app3","app4","app5","app6","app7","app9","app10"]; 

    for (var i = 0; i < popArray.length; i++) { 
     setTimeout(function() { 
      $('.site-footer h2').html(popArray[i]); 
      $('.site-footer').slideUp(300).delay(1000).slideDown(300); 
     }, i * 1000); 
    } 
});