JQuery - Создание х элементов, один за другим

Question

я использую Jquery UI для drag'n'drop элемент «паук» в элементе «чердак»

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

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

падение вызова паука есть функция «» grenierDrop что создает новый паук в случайном положении, в мансарде:

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

я хочу повторить эту функцию в 10 раз, с задержкой между каждым из них. Я знаю, как создать 10 пауков в одно и то же время (используя цикл FOR), но не как их создать один за другим, например, с задержкой в ​​2 секунды (я попробовал setTimeout, setInterval, цикл FOR, но без какого-либо результата).

Я думаю, что это основной вопрос, но я новичок ... Thx для вас помощь

Answer 1

setInterval является ключом, чтобы сделать это.

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 */);