CODEWITHSUNDEEP
jquerydelay
rolandnsharp
rolandnsharp

Reputation: 281

delay not delaying in for loop

I have a popup that I want to display a different message each time. Instead the .html() jQuery is run first and all I see is the last array item.

$(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);

}
});

Upvotes: 0

Views: 71

Answers (2)

Elliot Bonneville
Elliot Bonneville

Reputation: 53361

I think you need setTimeout here:

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

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388436

The main problem here is you are updating the html in the loop and the animation is asynchronous so the loop will get executed first then the animation will start that means by the time the animation starts the h2 has the last item in the array as its content.

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

Demo: Fiddle

Upvotes: 2

Related Questions