Как сделать выполнение кода асинхронно?

Question

[Madion]

Приветствую друзья!
Не могу разобраться с асинхронностью в JS. Помогите, пожалуйста.
Благодаря гуглению, написал такой код, который, как я думал, поможет мне справиться с моей задачей:

$.when.apply($, $('.category-content .items .item').map(function(index, item) {
    var total = $(item).find('.price').text().trim(); 

    (function(index, value) {
        var wait = index * 1000 + 1000;
        setTimeout(function() {
            console.log("Index1: " + index);
        }, wait)
    })(index);

    console.log("Index2: " + index);

    return total;

})).then(function(result) {
    console.log("Все!");
});

На выходе получаю это:

Index2: 0
Index2: 1
Index2: 2
Все!
Index1: 0
Index1: 1
Index1: 2

А требуется получить такое:

Index1: 0
Index2: 0
Index1: 1
Index2: 1
Index1: 2
Index2: 2
Все!

Как это сделать?

Answer 1

[Вячеслав Недорезов]

а вы setTimeout используете для асинхронности или для имитации какого-то долгого процесса?

Comments

[Madion]

в этом месте необязательно setTimeout
может и ajax-запрос выполняться

[Вячеслав Недорезов]

может как-то так? правда в жквери не силен :-)

$.when.apply($, $('.category-content .items .item').map(function(index, item) {
    var total = $(item).find('.price').text().trim(); 
    $.when(
         function(index, value) {
             var wait = index * 1000 + 1000;
             setTimeout(function() {
                 console.log("Index1: " + index);
             }, wait)
         },
         console.log("Index2: " + index)
    ).done(function(result) {
       return total;
     })
})).done(function(result) {
    console.log("Все!");
});