Выполнить код после того, как все запросы Ajax завершены

Question

Это мой код:

function updateCharts() {
    for (var i = 0; i < charts.length; i++) {
        updateChart(charts[i]);
    }

    sortQueues();
}

function updateChart(chart) {
    $.ajax({
        type: "POST",
        async: true,
        data: '{id: ' + chart.Id + '}',
        url: "foo/getData",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            var parsedResponse = JSON.parse(response.d);
            insertChartData(chart, parsedResponse);
        },
        failure: function (response) {
            console.Log(response);
        }
    });
}

Как запустить функцию sortQueues() после обновления всех графиков?Прямо сейчас функция sortQueues() выполняется до завершения insertChartData (потому что ajax вызывает), и диаграммы не сортируются в html.Конечно, я не хочу синхронизировать звонки.

Answer 1

$.ajax возвращает обещание , чтобы вы могли захватить их и использовать их с Promise.all.

Сначала верните обещание:

function updateChart(chart) {
    return $.ajax({

, затем заменитеваш цикл с map, так что вы получите все обещания в массиве.

var promises = charts.map(updateChart);

Тогда вы можете использовать обещание:

Promise.all(promises).then(array_of_results => {
    // all ajax requests recieved at this point
});