Задержка не задерживается для цикла

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); 
    } 
});