JQuery: вызов функции после асинхронной каждого

Question

Например мы в этот код:

$.each([1, 2, 3], function(key, val) { 
    gear(val); 
}); 

function gear(params) { 
    var values = {1: 'abc', 2: 'cba', 3: 'acb'}; 
    query(values[params]); 
} 

function query(settings) { 
    $.ajax({ 
    ... 
    settings 
    ... 
    }) 
} 

Как я ждать, пока каждая итерация не будет завершена, и назвать что-то еще?

Answer 1

Вы можете использовать .reduce() для перебора массива и JQuery Ajax обещает последовательность вызовов функций:

[1, 2, 3].reduce(function(p, item) { 
    return p.then(function() { 
     return gear(item); 
    }); 
}, $.Deferred().resolve()).then(function() { 
    // everything done here 
}); 

function gear(params) { 
    var values = {1: 'abc', 2: 'cba', 3: 'acb'}; 
    return query(values[params]); 
} 

function query(settings) { 
    return $.ajax({ 
    ... 
    settings 
    ... 
    }) 
} 

Это будет последовательно Аякс вызовов, так что следующий один Безразлично» t начинаться до тех пор, пока не будет выполнено предыдущее.

В обоих gear() и query() вы возвращаете обещание, что $.ajax() уже возвращается.

Затем вы используете .reduce() для повторения массива, в котором вы накапливаете обещание. Вы передаете первоначально разрешенное обещание, и затем каждый элемент из массива добавляет .then() в конец цепочки.

---

Если вы хотите запустить все Ajax звонки в то же время, а затем просто получить уведомление, когда они все сделали, вы могли бы сделать это:

$.when.apply($, [1, 2, 3].map(function(item) { 
    return gear(item); 
})).then(function(r1, r2, r3) { 
    // everything done here 
    // results are in arguments[0], arguments[1], ... arguments[n] 
}); 

function gear(params) { 
    var values = {1: 'abc', 2: 'cba', 3: 'acb'}; 
    return query(values[params]); 
} 

function query(settings) { 
    return $.ajax({ 
    ... 
    settings 
    ... 
    }) 
} 

Answer 2

Ниже приведен пример его достижения.

function iterate(callback) { 
 

 
    $.each([1, 2, 3], function(key, val) { 
 
    gear(val); 
 
    }); 
 
    
 
    callback(); 
 
} 
 

 
function gear(params) { 
 
    var values = { 
 
    1: 'abc', 
 
    2: 'cba', 
 
    3: 'acb' 
 
    }; 
 
    print(values[params]); 
 
} 
 

 
function print(str) { 
 
    document.write(str + "<br />") 
 
} 
 

 
function notifyComplete(){ 
 
    print("Completed.") 
 
} 
 

 
iterate(notifyComplete);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 3

var deferreds = []; 
$.each([1, 2, 3], function(key, val) { 
    gear(val); 
}); 

function gear(params) { 
    var values = {1: 'abc', 2: 'cba', 3: 'acb'}; 
    query(values[params]); 
} 

function query(settings) { 
    deferreds.push($.ajax({ 
    ... 
    settings 
    ... 
    })); 
} 
$.when.apply($, deferreds).done(function(){ 
    // do something here 
});