I have an array: result[i]. I'd like to loop through each field in the array and append it to an element in my page.

$("tr:first").after(result[i]);

But I'd like this to happen with a delay.

Been trying to grock how queues work with each loops and a delay, but I just can't seem to work it out. I can get a delay, but only before they're all appended.

Thanks in advance.

I have an array: result[i]. I'd like to loop through each field in the array and append it to an element in my page.

$("tr:first").after(result[i]);

But I'd like this to happen with a delay.

Been trying to grock how queues work with each loops and a delay, but I just can't seem to work it out. I can get a delay, but only before they're all appended.

Thanks in advance.

• javascript
• jquery
• arrays
• loops

Share Improve this question Follow asked Jan 13, 2011 at 16:44 jackreichertjackreichert 1,97922 gold badges2323 silver badges3737 bronze badges 0

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

Try queue:

$.each(result, function(idx, val) {
    $("tr:first").delay(1000).queue(function(next) {
        $(this).after(val);
        next();
    });
});

Just to be plete, this is for jQuery 1.4. In earlier versions, the callback should look like:

function() {
    // do whatever here
    $(this).dequeue();
}

Behold, the power of recursion:

(function append(i) {
  if (i >= result.length) return;
  $('tr:first').after(result[i]);
  setTimeout(function(){append(i+1)},1000);
})(0);

You may add an additional setTimeout depending on whether you need the first item to appear immediately or after a delay.

$(result).each(function(i) {
    $("tr:first").delay(1000).after(result[i]);
});

Another way you could handle this is by looping over your result array and setting up a bunch of setInterval or .delay() function calls, with delays that vary based upon the array index. For example:

for( var i = 0; i < result.length; i++ ){
  $('tr:first').delay(i*1000).after(result[i]);
}

To be sure, this isn't as good a solution as the recursive one provided by @Victor above, but it's another approach in case you don't like recursion for whatever reason.