cant apply delay between each table row append using jquery

Question

i would like to get delay of 3 seconds between appending of each rows

Only first iteration of append works, rest of the array is not printed

$(document).ready(function(){
var n=[];
for(var i=1;i<80;i++)
{
n[i]=i;
$("#content table").append("<tr><td>"+n+"<td></tr>").setTimeout(3000);
}
});

`delay()` doesn't work like this.. it works for functions like `animate` or you have to build up a queue.. You have to use `setTimeout()`instead.. — Anujith, Jan 28 '13 at 11:57
http://stackoverflow.com/questions/8401308/jquery-delay-function — Th0rndike, Jan 28 '13 at 11:57

Anujith · Accepted Answer · 2013-01-28T12:16:25.920

1

Try:

 $(document).ready(function () {
 var n = [];
  for (var i = 1; i < 80; i++) {
      n[i] = i;
      $("#content table").delay(3000)
          .queue(function (nxt) {
          $(this).append("<tr><td>" + n + "<td></tr>");
          nxt(); 
      });
   }
 });

Sample

edited Jan 28 '13 at 12:16

answered Jan 28 '13 at 12:05

Anujith

9,370
6
33
48

score 0 · Answer 2 · answered Jan 28 '13 at 12:04

Here is a working example: http://jsbin.com/etaqez/4/edit

I've used a setInterval backed with a counter. If it reaches the length of the array the interval is cleared.

$(document).ready(function(){
  var n=[];
  for(var i=1;i<80;i++) {
    n[i]=i;
  }

  var counter = 1;

  var addRow = function(elem){
    if (counter < n.length) {
      $("#content table").append("<tr><td>"+n[counter]+"<td></tr>");

      counter += 1;      
    } else {
      clearInterval(timer);
    }
  };

  var timer = setInterval(addRow, 3000);  

});

Thankyou! for both code and introducing me to jsbin.com, very useful for learners like me — violet kiwi, Jan 28 '13 at 12:16

cant apply delay between each table row append using jquery

2 Answers2