CODEWITHSUNDEEP
javascriptjquery
Ayush
Ayush

Reputation: 42450

Delay each iteration of loop by a certain time

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

Upvotes: 6

Views: 5248

Answers (1)

jfriend00
jfriend00

Reputation: 707326

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

Upvotes: 9

Related Questions