将循环的每次迭代延迟一定时间

Question

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

法典：

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

如何将循环的每次迭代延迟一定时间？

我尝试了以下方法，但没有成功：

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

和

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

Answer 1

这些情况似乎都是通过将操作放入本地函数中，然后从setTimeout()调用该本地函数来实现延迟来最好。 由于 javascript 中闭包的奇迹，局部函数可以访问其上级的所有变量，因此您可以像这样跟踪循环计数：

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