trễ mỗi lần lặp của vòng lặp trong một thời gian nhất định

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

Làm thế nào tôi có thể trì hoãn mỗi lần lặp của vòng lặp trong một thời gian nhất định?

Tôi đã thử các sau thất bại:

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

và

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

Answer 1

Những trường hợp này tất cả dường như làm việc tốt nhất bằng cách đặt các hoạt động vào một chức năng địa phương và sau đó gọi rằng chức năng địa phương từ setTimeout() để thực hiện sự chậm trễ của bạn. Do những điều kỳ diệu của việc đóng cửa trong javascript, chức năng cục bộ được truy cập vào tất cả các biến ở các cấp phía trên để bạn có thể theo dõi số vòng lặp của bạn như sau:

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