Warten, bis alle jQuery Ajax-Anfragen erledigt sind?

Question

Wie mache ich eine Funktion warten, bis alle jQuery Ajax-Anforderungen innerhalb einer anderen Funktion fertig sind?

Kurz gesagt, ich muss warten, bis alle Ajax-Anfragen erledigt sind, bevor ich die nächste ausführe. Aber wie?

Answer 1

In jQuery können Sie angeben, ob die Ajax-Anfrage asynchron sein soll oder nicht. Sie können die Ajax-Anfragen einfach synchron machen und dann wird der Rest des Codes nicht ausgeführt, bis sie zurückkommen.

Zum Beispiel:

jQuery.ajax({ 
    async: false,
    //code
});

Answer 2

Eine kleine Abhilfe ist etwa so:

// Define how many Ajax calls must be done
var ajaxCalls = 3;
var counter = 0;
var ajaxCallComplete = function() {
    counter++;
    if( counter >= ajaxCalls ) {
            // When all ajax calls has been done
        // Do something like hide waiting images, or any else function call
        $('*').css('cursor', 'auto');
    }
};

var loadPersons = function() {
        // Show waiting image, or something else
    $('*').css('cursor', 'wait');

    var url = global.ctx + '/loadPersons';
    $.getJSON(url, function(data) {
            // Fun things
    })
    .complete(function() { **ajaxCallComplete();** });
};

var loadCountries = function() {
    // Do things
    var url = global.ctx + '/loadCountries';
    $.getJSON(url, function(data) {
            // Travels
    })
    .complete(function() { **ajaxCallComplete();** });
};

var loadCities = function() {
    // Do things
    var url = global.ctx + '/loadCities';
    $.getJSON(url, function(data) {
            // Travels
    })
    .complete(function() { **ajaxCallComplete();** });
};

$(document).ready(function(){
    loadPersons();
    loadCountries();
    loadCities();
});

Hoffnung kann nützlich sein...

Answer 3

Javascript ist ereignisbasiert, daher sollten Sie niemals warten stattdessen Haken/Rückrufe setzen

Sie können wahrscheinlich einfach die Methoden success/complete von jquery.ajax

Oder Sie könnten verwenden .ajaxComplete :

$('.log').ajaxComplete(function(e, xhr, settings) {
  if (settings.url == 'ajax/test.html') {
    $(this).text('Triggered ajaxComplete handler.');
    //and you can do whatever other processing here, including calling another function...
  }
});

Allerdings sollten Sie einen Pseudocode posten, wie Ihre Ajax-Anfrage(n) aufgerufen wird (werden), um genauer zu sein...

Answer 4

Wie bereits in anderen Antworten erwähnt, können Sie Folgendes verwenden ajaxStop() zu warten, bis alle Ajax-Anfragen abgeschlossen sind.

$(document).ajaxStop(function() {
     // This function will be triggered every time any ajax request is requested and completed
});

Wenn Sie es für einen bestimmten Zweck tun wollen ajax() Bitte verwenden Sie am besten complete() Methode innerhalb der bestimmten Ajax-Anfrage:

$.ajax({
    type: "POST",
    url: "someUrl",
    success: function(data) {
        // This function will be triggered when ajax returns a 200 status code (success)
    },
    complete: function() {
        // This function will be triggered always, when ajax request is completed, even it fails/returns other status code
    },
    error: function() {
        // This will be triggered when ajax request fail.
    }
});

Aber, wenn Sie brauchen nur auf einige wenige und bestimmte Ajax-Anfragen zu warten? Verwenden Sie das wunderbare Javascript verspricht um zu warten, bis die Ajax, auf die Sie warten wollen, fertig sind. Ich habe ein kurzes, einfaches und lesbares Beispiel erstellt, um Ihnen zu zeigen, wie Versprechen mit Ajax funktioniert.
Bitte sehen Sie sich das nächste Beispiel an . Ich benutzte setTimeout um das Beispiel zu verdeutlichen.

// Note:
// resolve() is used to mark the promise as resolved
// reject() is used to mark the promise as rejected

$(document).ready(function() {
    $("button").on("click", function() {

        var ajax1 = new Promise((resolve, reject) => {
            $.ajax({
                type: "GET",
                url: "https://miro.medium.com/max/1200/0*UEtwA2ask7vQYW06.png",
                xhrFields: { responseType: 'blob'},
                success: function(data) {
                    setTimeout(function() {
                        $('#image1').attr("src", window.URL.createObjectURL(data));
                        resolve(" Promise ajax1 resolved");
                    }, 1000);
                },
                error: function() {
                    reject(" Promise ajax1 rejected");
                },
            });
        });

        var ajax2 = new Promise((resolve, reject) => {
            $.ajax({
                type: "GET",
                url: "https://cdn1.iconfinder.com/data/icons/social-media-vol-1-1/24/_github-512.png",
                xhrFields: { responseType: 'blob' },
                success: function(data) {
                    setTimeout(function() {
                         $('#image2').attr("src", window.URL.createObjectURL(data));
                         resolve(" Promise ajax2 resolved");
                    }, 1500);
                },
                error: function() {
                    reject(" Promise ajax2 rejected");
                },
            });
        });

        var ajax3 = new Promise((resolve, reject) => {
            $.ajax({
                type: "GET",
                url: "https://miro.medium.com/max/632/1*LUfpOf7teWvPdIPTBmYciA.png",
                xhrFields: { responseType: 'blob' },
                success: function(data) {
                    setTimeout(function() {
                         $('#image3').attr("src", window.URL.createObjectURL(data));
                         resolve(" Promise ajax3 resolved");
                    }, 2000);
                },
                error: function() {
                    reject(" Promise ajax3 rejected");
                },
            });
        });

        Promise.all([ajax1, ajax2, ajax3]).then(values => {
            console.log("We waited until ajax ended: " + values);
            console.log("My few ajax ended, lets do some things!!")
        }, reason => {
            console.log("Promises failed: " + reason);
        });

        // Or if you want wait for them individually do it like this
        // ajax1.then(values => {
        //    console.log("Promise 1 resolved: " + values)
        // }, reason => {
        //     console.log("Promise 1 failed: " + reason)
        // });
    });

});

img {
  max-width: 200px;
  max-height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Make AJAX request</button>
<div id="newContent">
    <img id="image1" src="">
    <img id="image2" src="">
    <img id="image3" src="">
</div>

Answer 5

Sie können auch Folgendes verwenden async.js .

Ich denke, seine besser als $.when, weil Sie alle Arten von asynchronen Aufruf, der nicht unterstützt Versprechen aus der Box wie Timeouts, SqlLite Anrufe usw. und nicht nur Ajax-Anforderungen zusammenführen können.