延迟不延迟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); 
    } 
});