Delay each iteration of loop by a certain time

Question

JSFiddle: http://jsfiddle.net/KH8Gf/27/

Code:

$(document).ready(function()
{
 $('#expand').click(function()
    {
        var qty= $('#qty').val();

        for (var counter = 0; counter < qty; counter++)
        {
            $('#child').html($('#child').html() + '<br/>new text');            
        }
    });
});

How can I delay each iteration of the loop by a certain time?

I tried the following unsuccessfully:

setTimeout(function(){
$('#child').html($('#child').html() + '<br/>new text'); 
},500);

and

$('#child').delay(500).html($('#child').html() + '<br/>new text'); 

Answer 1

These cases all seem to work best by putting the operation into a local function and then calling that local function from setTimeout() to implement your delay. Due to the wonders of closures in javascript, the local function gets access to all the variables at the levels above it so you can keep track of your loop count there like this:

$(document).ready(function() {
     $('#expand').click(function() {
          var qty = $('#qty').val();
          var counter = 0;
          var child = $('#child');

          function next() {
              if (counter++ < qty) {
                  child.append('<br/>new text');            
                  setTimeout(next, 500);
              }
          }
          next();
      });
});