延遲經一定時間

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