[Résolu] Créer x éléments à la suite

EDIT :
J'ai eu ma réponse en 10 secondes chrono sur le site StackOverflow, un exploit !
Voici la réponse de l'aidant :

var counter = 0;

var timer = setInterval(function() {
    // Do some stuff

    counter += 1;
    if (counter >= 10) {
        // Kill the timer after 10 times
        clearInterval(timer);
    }

}, 2000 /* In ms. So it's 2 seconds */);

Bonjour à tous,

J'apprends le jQuery, et en ce moment j'essaie de générer des petites araignées qui vont apparaitre les unes après les autres (avec une limite de 10 bestioles max) dans un grenier.

Complément : j'utilise jQuery UI pour le drag'n'drop de la première araignée. Lors de son 'drop', la fonction que je veux créer se lance.

1) Je rends mon araignée de base 'draggable'

$('.animaux').draggable( {
      containment: '.page',
      stack: '.menu_animaux img',
      cursor: '-webkit-grab',
      revert: 'invalid',
	  helper: 'clone'	  
    });

2) Je rends ma zone grenier 'droppable'

$('#grenier').droppable( {
      accept: '.l_grenier',
      hoverClass: 'hovered',
	  drop: grenierDrop      
    });

3) Au drop, la fonction 'grenierDrop' se lance, elle sert à créer une araignée qui va se placer au hasard dans ma div 'grenier' :

$('<img class="araignee" src="img/araignee.png" />').css({
			'position':'absolute',
			'top': (Math.random() * ($('#grenier').height() - $('.araignee').height())).toFixed()+'px',
			'left': (Math.random() * ($('#grenier').width() - $('.araignee').width())).toFixed()+'px'
			}).appendTo('#grenier').addClass("animated tada");

4) J'ai testé pas mal de choses pour créer une boucle qui va faire apparaître 10 fois l'araignée, une après l'autre (boucle while, for, setInterval, setTimeout, mais je dois m'y prendre comme un manche et ça ne fonctionne pas.

Quelqu'un peut-il me remettre dans le droit chemin?
Modifié par hurlemort (10 Jul 2015 - 13:27)