Retarder chaque itération de boucle d’un certain temps

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() + '
new text'); } }); });

Comment puis-je retarder chaque itération de la boucle d’un certain temps?

J’ai essayé sans succès ce qui suit:

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

et

 $('#child').delay(500).html($('#child').html() + '
new text');

Ces cas semblent tous fonctionner mieux en plaçant l’opération dans une fonction locale puis en appelant cette fonction locale à partir de setTimeout() pour implémenter votre délai. En raison des merveilles de fermeture en javascript, la fonction locale a access à toutes les variables aux niveaux supérieurs pour que vous puissiez suivre le nombre de vos boucles comme suit:

 $(document).ready(function() { $('#expand').click(function() { var qty = $('#qty').val(); var counter = 0; var child = $('#child'); function next() { if (counter++ < qty) { child.append('
new text'); setTimeout(next, 500); } } next(); }); });