Run code once all ajax requests have been completed

Question

Run code once all ajax requests have been completed

Here's the code snippet I'm working with:

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);
        }
    });
}

I'm facing an issue where the sortQueues() function is being run before all charts are updated due to ajax calls. As a result, the charts in the HTML aren't sorted as expected. Can anyone suggest a way to ensure that sortQueues() is only executed after all instances of insertChartData have completed, without resorting to synchronous calls?

javascript ajax

Answer 1

Answer №1

$.ajax provides a promise, allowing you to capture and utilize them with the help of Promise.all.

To begin, retrieve the promise:

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

Next, replace your loop with map to gather all promises within an array.

var promises = charts.map(updateChart);

Finally, leverage the promise:

Promise.all(promises).then(array_of_results => {
    // All ajax requests have been completed at this point
});

Answer 2

$.ajax provides a promise, allowing you to capture and utilize them with the help of Promise.all.

To begin, retrieve the promise:

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

Next, replace your loop with map to gather all promises within an array.

var promises = charts.map(updateChart);

Finally, leverage the promise:

Promise.all(promises).then(array_of_results => {
    // All ajax requests have been completed at this point
});

Run code once all ajax requests have been completed

Answer №1

Similar questions

Is there a way to pass a variable from a Django view to an HTML page using Ajax when the user presses a key

Adding elements to a two-dimensional array using AngularJS

Angular5+ Error: Unable to retrieve summary for RouterOutlet directive due to illegal state

Dealt with and dismissed commitments in a personalized Jasmine Matcher

Can React JSX and non-JSX components be combined in a single project?

Difficulty accessing class functions from the test application in Node.js NPM and Typescript

Is there a way to verify the phone number input field on my registration form along with the country code using geolocation

Setting the state of a nested array within an array of objects in React

What is the best way to display only a specific container from a page within an IFRAME?

How can I update getServerSideProps using a change event in Next.js?

Handling asynchronous behavior in the context of conditional statements can be a challenging aspect of

The plugin function cannot be executed unless inside the document.ready event

GSAP also brings scale transformations to life through its animation capabilities

Is it possible for me to generate values using PHP that can be easily read by JavaScript?

Concluding the use of angular-bootstrap-datetimepicker when selecting a date

The jQuery fadeOut function modifies or erases the window hash

The Enigmatic Essence of TypeScript

How can union types be used correctly in a generic functional component when type 'U' is not assignable to type 'T'?

Using PHP and jQuery to generate push notifications can result in issues with server performance

Showing the json encoded array received from an ajax response