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

演示：小提琴

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