Warten Sie, bis alle jQuery Ajax-Anforderungen abgeschlossen sind?

675

Wie lasse ich eine Funktion warten, bis alle jQuery Ajax-Anforderungen in einer anderen Funktion ausgeführt wurden?

Kurz gesagt, ich muss warten, bis alle Ajax-Anforderungen ausgeführt wurden, bevor ich die nächste ausführe. Aber wie?

Jamietelin
quelle
Wie rufen Sie Ihre ursprünglichen Ajax-Anfragen auf?
NakedBrunch
2
Was meinst du mit "erledigt"? Ich verstehe es als "alle Anfragen wurden entweder erfolgreich abgeschlossen oder nicht" (gelöst oder abgelehnt). Sie können jedoch bedeuten, dass "alle Anforderungen erfolgreich abgeschlossen wurden" (behoben). siehe alle Variationen in api.jquery.com/category/deferred-object
Adrien Be

Antworten:

911

jQuery definiert jetzt eine when-Funktion für diesen Zweck.

Es akzeptiert eine beliebige Anzahl von verzögerten Objekten als Argumente und führt eine Funktion aus, wenn alle aufgelöst werden.

Das heißt, wenn Sie (zum Beispiel) vier Ajax-Anforderungen initiieren und dann eine Aktion ausführen möchten, wenn sie abgeschlossen sind, können Sie Folgendes tun:

$.when(ajax1(), ajax2(), ajax3(), ajax4()).done(function(a1, a2, a3, a4){
    // the code here will be executed when all four ajax requests resolve.
    // a1, a2, a3 and a4 are lists of length 3 containing the response text,
    // status, and jqXHR object for each of the four ajax calls respectively.
});

function ajax1() {
    // NOTE:  This function must return the value 
    //        from calling the $.ajax() method.
    return $.ajax({
        url: "someUrl",
        dataType: "json",
        data:  yourJsonData,            
        ...
    });
}

Meiner Meinung nach sorgt dies für eine saubere und klare Syntax und vermeidet die Einbeziehung globaler Variablen wie ajaxStart und ajaxStop, die bei der Entwicklung Ihrer Seite unerwünschte Nebenwirkungen haben können.

Wenn Sie nicht im Voraus wissen, auf wie viele Ajax-Argumente Sie warten müssen (dh Sie möchten eine variable Anzahl von Argumenten verwenden), ist dies immer noch möglich, aber nur ein wenig schwieriger. Siehe Übergeben eines Arrays von Zurückgestellten an $ .when () (und möglicherweise jQuery .when Fehlerbehebung mit variabler Anzahl von Argumenten ).

Wenn Sie eine tiefere Kontrolle über die Fehlermodi der Ajax-Skripte usw. benötigen, können Sie das von zurückgegebene Objekt speichern .when()- es ist ein jQuery Promise- Objekt, das alle ursprünglichen Ajax-Abfragen umfasst. Sie können .then()oder aufrufen .fail(), um detaillierte Erfolgs- / Fehlerbehandlungsroutinen hinzuzufügen.

Alex
quelle
46
Dies sollte als richtige Antwort markiert werden, da es einfach, effizient und hervorragend funktioniert. Es sollte auch beachtet werden, dass $.whenein PromiseObjekt zurückgegeben wird, das nicht nur nützlichere Methoden hat .done. Mit der .then(onSuccess, onFailure)Methode können Sie beispielsweise reagieren, wenn beide Anforderungen erfolgreich sind oder mindestens eine fehlschlägt.
Skalee
2
Ist es möglich, die Anforderungen ajax1..4 in einem Array zusammenzufassen und zu übergeben?
andig
33
Seien Sie vorsichtig mit dem failFall. Im Gegensatz dazu donescheitern failBrände sofort beim ersten Fehlschlag und ignorieren die verbleibenden Verzögerungen.
Ryan Mohr
1
@skalee danke, dass Sie die Tatsache hervorgehoben haben, dass eine onFailureFunktion angehängt werden könnte. Wie ich in einem Kommentar zur Frage des OP betonte: Vielleicht möchte er genauer angeben, was er mit "erledigt" meinte. „Ryan Mohr“ hatte auch einen sehr guten Punkt in Bezug auf die Tatsache , dass failverhält sich anders als doneeinige weitere Lesung getan werden über PromisesIch denke , html5rocks.com/en/tutorials/es6/promises
Adrien Be
1
Es ist großartig, Menschen mit der When-Methode und Versprechungen im Allgemeinen vertraut zu machen, aber ich denke, dies ist nicht die beste Antwort. Wenn eine dieser Ajax-Funktionen irgendwo auf der ganzen Linie eine weitere Ajax-Anfrage erstellt und dieses neue Versprechen dann nicht korrekt in die Kette integriert, werden diese Anfragen dieser Technik entgehen. Zum Beispiel kann ich diese Technik nicht verwenden, ohne die Shopify-Bibliothek zu ändern, die ich für das Ajax-Add-to-Cart-Verhalten verwende, da sie nicht "vielversprechend" geschrieben wurde und niemals die von ihr erstellten xhr-Objekte zurückgibt. Macht das Sinn? Trotzdem eine gute Antwort!
Ziggy
292

Wenn Sie wissen möchten, wann alle ajax Anforderungen in Ihrem Dokument abgeschlossen sind, egal wie viele davon vorhanden sind, verwenden Sie einfach das Ereignis $ .ajaxStop wie folgt :

$(document).ajaxStop(function () {
  // 0 === $.active
});

In diesem Fall müssen Sie weder erraten, wie viele Anforderungen in der Anwendung auftreten, die möglicherweise in Zukunft abgeschlossen werden, noch die komplexe Logik von Funktionen untersuchen oder herausfinden, welche Funktionen HTTP(S)Anforderungen ausführen.

$.ajaxStopHier kann auch an jeden HTMLKnoten gebunden werden, von dem Sie glauben, dass er durch requst geändert wird.


Update:
Wenn Sie sich an die ESSyntax halten möchten, können Sie Promise.all für bekannte ajaxMethoden verwenden:

Promise.all([ajax1(), ajax2()]).then(() => {
  // all requests finished successfully
}).catch(() => {
  // all requests finished but one or more failed
})

Ein interessanter Punkt hier ist, dass es sowohl mit Promisesals auch mit $.ajaxAnfragen funktioniert .

Hier ist die jsFiddle- Demonstration.


Update 2:
Noch neuere Version mit asynchroner / wartender Syntax:

try {
  const results = await Promise.all([ajax1(), ajax2()])
  // do other actions
} catch(ex) { }
Arsen Khachaturyan
quelle
16
+1 Viel besser als andere Antworten, wenn Sie sich mit Skripten von Drittanbietern mit anonymen Rückrufen / Schließungen befassen müssen.
Kaiser
5
@kaiser Gültiger Punkt, aber es ist nicht das, was die Frage gestellt hat. Es ist nicht sehr gut, wenn Sie nicht auf die Rückkehr aller AJAX-Anrufe warten möchten. Die Frage bezieht sich speziell auf das Warten auf die AJAX-Aufrufe, die Sie selbst getätigt haben (aufgerufen in einer anderen Funktion, wie das OP geschrieben hat). Möglicherweise hat ein anderer Code einen weiteren AJAX-Aufruf ausgeführt, auf den Sie nicht warten möchten.
Juan Mendes
6
Im Vergleich zur when () -Lösung hat es den Vorteil, auch dann zu funktionieren, wenn die Anzahl der Ajax-Aufrufe nicht bekannt ist.
Alexis Dufrenoy
5
Im Vergleich zur when () -Lösung hat es den großen Nachteil, nicht gut mit anderen Komponenten zusammenzuarbeiten, da es einen dokumentweiten globalen Status aufweist. Wenn ununterbrochen lange Abfragen stattfinden, wird diese möglicherweise nie ausgelöst.
Bergi
3
Du bist nicht richtig @AdrienBe, ajaxStop behandelt alle AJAX - Anfragen egal tun sie Erfolg haben oder nicht, nur als Beweis für meine Worte an dieser aussehen jsfiddle.net/36votxba/2
Arsen Khachaturyan
32

Ich fand eine gute Antwort von gnarf mein Selbst , das ist genau das , was ich gesucht :)

jQuery ajaxQueue

//This handles the queues    
(function($) {

  var ajaxQueue = $({});

  $.ajaxQueue = function(ajaxOpts) {

    var oldComplete = ajaxOpts.complete;

    ajaxQueue.queue(function(next) {

      ajaxOpts.complete = function() {
        if (oldComplete) oldComplete.apply(this, arguments);

        next();
      };

      $.ajax(ajaxOpts);
    });
  };

})(jQuery);

Anschließend können Sie der Warteschlange eine Ajax-Anforderung wie folgt hinzufügen:

$.ajaxQueue({
        url: 'page.php',
        data: {id: 1},
        type: 'POST',
        success: function(data) {
            $('#status').html(data);
        }
    });
Jamietelin
quelle
37
Es sieht so aus, als hätten Sie vergessen, dieser Antwort die richtige Zuordnung zu geben. Ich habe sie hinzugefügt.
Tim Post
21

Verwenden Sie das ajaxStopEreignis.

Angenommen, Sie haben beim Abrufen von 100 Ajax-Anforderungen eine Nachricht zum Laden ... und möchten diese Nachricht nach dem Laden ausblenden.

Aus dem jQuery- Dokument :

$("#loading").ajaxStop(function() {
  $(this).hide();
});

Beachten Sie, dass es darauf wartet, dass alle Ajax-Anforderungen auf dieser Seite ausgeführt werden.

olafure
quelle
5
Dies setzt voraus, dass Sie wissen, dass es keine anderen AJAX-Anfragen auf der Seite gibt, keine sehr gute Annahme
Juan Mendes
Ab jQuery 1.8 sollte die Methode .ajaxStop () nur an das Dokument angehängt werden.
Geomorillo
1
Korrigieren Sie mich, wenn ich falsch liege, aber wird Ihr Projekt dadurch nicht zu einer "Old School Web Forms" -Seite? Ich meine, wenn Sie Ihre gesamte Seite auf eine Anfrage warten müssen, bevor sie fortgesetzt werden kann, wozu dient dann die Ajax-Anfrage überhaupt?
BillRuhl
@BillRuhl In unserem Fall durchlaufe ich eine JQuery-Sammlung, um neue Inhalte zu erstellen, und muss die gesamte Sammlung kennen, wenn sie fertig ist, bevor ich einige Layoutanpassungen vornehme. Scheint kein besonders ungewöhnlicher Fall zu sein. Wäre schlecht, wenn ein paar andere Ajax-Sachen in Bearbeitung wären, aber hier nicht.
Äon
21

HINWEIS: Die obigen Antworten verwenden Funktionen, die zum Zeitpunkt des Schreibens dieser Antwort noch nicht vorhanden waren. Ich empfehle die VerwendungjQuery.when() anstelle dieser Ansätze zu verwenden, aber ich lasse die Antwort für historische Zwecke.

- -

Sie könnten wahrscheinlich mit einem einfachen Zählsemaphor auskommen, obwohl die Art und Weise, wie Sie es implementieren, von Ihrem Code abhängt. Ein einfaches Beispiel wäre so etwas wie ...

var semaphore  = 0,     // counting semaphore for ajax requests
    all_queued = false; // bool indicator to account for instances where the first request might finish before the second even starts

semaphore++;
$.get('ajax/test1.html', function(data) {
    semaphore--;
    if (all_queued && semaphore === 0) {
        // process your custom stuff here
    }
});

semaphore++;
$.get('ajax/test2.html', function(data) {
    semaphore--;
    if (all_queued && semaphore === 0) {
        // process your custom stuff here
    }
});

semaphore++;
$.get('ajax/test3.html', function(data) {
    semaphore--;
    if (all_queued && semaphore === 0) {
        // process your custom stuff here
    }
});

semaphore++;
$.get('ajax/test4.html', function(data) {
    semaphore--;
    if (all_queued && semaphore === 0) {
        // process your custom stuff here
    }
});

// now that all ajax requests are queued up, switch the bool to indicate it
all_queued = true;

Wenn Sie möchten, dass dies wie {async: false} funktioniert, Sie den Browser jedoch nicht sperren möchten, können Sie dasselbe mit einer jQuery-Warteschlange erreichen.

var $queue = $("<div/>");
$queue.queue(function(){
    $.get('ajax/test1.html', function(data) {
        $queue.dequeue();
    });
}).queue(function(){
    $.get('ajax/test2.html', function(data) {
        $queue.dequeue();
    });
}).queue(function(){
    $.get('ajax/test3.html', function(data) {
        $queue.dequeue();
    });
}).queue(function(){
    $.get('ajax/test4.html', function(data) {
        $queue.dequeue();
    });
});
BBonifield
quelle
10
Dies scheint ein triviales Problem zu komplizieren.
Chris
2
Es ist wirklich nicht so kompliziert. Das Zählen von Semaphoren ist ein üblicher Mechanismus in CS. Wenn Sie es jedoch vorziehen, funktioniert das Beispiel mit jQuery-Warteschlangen ebenfalls, ohne dass Sie das Semaphor selbst implementieren müssen.
BBonifield
1
Ich sehe kein Problem mit dem Semaphorzähler, aber ich sehe ein Problem mit der Idee, VIER Funktionen zu haben, um den resultierenden Rückruf zu verarbeiten. Sie sollten zuerst eine Funktion definieren und dann jeweils auf diese Funktion verweisen .get(). Auf diese Weise duplizieren Sie diesen Code zumindest nicht. Nicht nur das, sondern das Deklarieren eines function(){}jedes Mal reserviert jedes Mal Speicher! Eher schlechte Praxis, wenn Sie eine statisch definierte Funktion aufrufen könnten.
Alexis Wilke
1
@AlexisWilke Dies ist eine 4,5 Jahre alte Antwort, die ein Beispiel für die Funktionsweise von Semaphoren und Warteschlangen sein sollte. Sie denken ein wenig zu viel darüber nach, und ich denke nicht, dass KAPITALISIERUNG, UM EINEN PUNKT ZU MACHEN, notwendig ist.
BBonifield
2
Nun ... ich bin nicht derjenige, der dir eine -1 gegeben hat ... und ich verstehe, dass Antworten dazu neigen, zu altern. Die Leute finden sie jedoch immer wieder und soweit ich weiß, ist es nicht verboten, Informationen an Personen weiterzugeben, die sie möglicherweise noch heute nutzen werden.
Alexis Wilke
8

Javascript ist ereignisbasiert, daher sollten Sie niemals warten , sondern Hooks / Callbacks festlegen

Sie können wahrscheinlich nur die Erfolgs- / Vollständigkeitsmethoden von jquery.ajax verwenden

Oder Sie könnten .ajaxComplete verwenden :

$('.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...
  }
});

obwohl Sie einen Pseudocode veröffentlichen sollten, wie Ihre Ajax-Anfrage (n) aufgerufen wird (werden), um genauer zu sein ...

Stefano
quelle
8

Eine kleine Problemumgehung ist ungefähr 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 ...

Jesfre
quelle
Während die anderen Antworten technisch besser sind, da es viel einfacher zu verstehen ist, mag ich diese wirklich. Nett!
Jay
4

Mit jQuery können Sie angeben, ob die Ajax-Anforderung asynchron sein soll oder nicht. Sie können die Ajax-Anforderungen einfach synchronisieren, und der Rest des Codes wird erst ausgeführt, wenn sie zurückgegeben werden.

Zum Beispiel:

jQuery.ajax({ 
    async: false,
    //code
});
shmuel613
quelle
42
Zu beachten ist, dass die Verwendung von {async: false} den Browser vorübergehend sperren kann. api.jquery.com/jQuery.ajax
BBonifield
30
Dies widerspricht der Standardpraxis von jQuery / Javascript. AJAX soll immer asynchron sein. Sie sollten stattdessen jQuery.when () verwenden.
SystemParadox
43
Es ist eine schrecklich schlechte Idee! Mach das niemals ! Blockieren = überhaupt nicht auf Benutzeraktionen reagieren, auch nicht auf Scrollen oder ähnliches! (Auch async: false wird in jQuery 1.8 veraltet sein.)
Skalee
5
Insbesondere wenn die Anforderung aus unvorhersehbaren Gründen fehlschlägt oder lange dauert (was nach Murphys Gesetz zwangsläufig der Fall ist!), Ist dies normalerweise eine schlechte Idee für den Produktionscode, da der Browser wie oben angegeben gesperrt ist.
Alex
27
Das ist eine schrecklich schlechte Idee. VERWENDEN SIE DIESE ANTWORT NICHT.
Tauren
2

Wenn Sie etwas Einfaches brauchen; einmal und Rückruf erledigt

        //multiple ajax calls above
        var callback = function () {
            if ($.active !== 0) {
                setTimeout(callback, '500');
                return;
            }
            //whatever you need to do here
            //...
        };
        callback();
Fatmuemoo
quelle
4
es kann eine Endlosschleife erzeugen!
Diego Favero
2
Dies ist eine Endlosschleife? Wann? Wann kehrt der AJAX nie zurück?
Jonathan
2

Sie können auch async.js verwenden .

Ich denke, es ist besser als $ .wenn, weil Sie alle Arten von asynchronen Anrufen zusammenführen können, die keine sofort einsatzbereiten Versprechen wie Timeouts, SqlLite-Aufrufe usw. und nicht nur Ajax-Anforderungen unterstützen.

George Mavritsakis
quelle
2

Auf der Grundlage der Antwort von @BBonifield habe ich eine Dienstprogrammfunktion geschrieben, damit die Semaphorlogik nicht in allen Ajax-Aufrufen verteilt wird.

untilAjax ist die Dienstprogrammfunktion, die eine Rückruffunktion aufruft, wenn alle ajaxCalls abgeschlossen sind.

ajaxObjsist ein Array von Ajax-Einstellungsobjekten [http://api.jquery.com/jQuery.ajax/].

fn ist Rückruffunktion

function untilAjax(ajaxObjs, fn) {
  if (!ajaxObjs || !fn) {
    return;
  }
  var ajaxCount = ajaxObjs.length,
    succ = null;

  for (var i = 0; i < ajaxObjs.length; i++) { //append logic to invoke callback function once all the ajax calls are completed, in success handler.
    succ = ajaxObjs[i]['success'];
    ajaxObjs[i]['success'] = function(data) { //modified success handler
      if (succ) {
        succ(data);
      }
      ajaxCount--;
      if (ajaxCount == 0) {
        fn(); //modify statement suitably if you want 'this' keyword to refer to another object
      }
    };
    $.ajax(ajaxObjs[i]); //make ajax call
    succ = null;
  };

Beispiel: doSomethingFunktion verwendet untilAjax.

function doSomething() {
  // variable declarations
  untilAjax([{
    url: 'url2',
    dataType: 'json',
    success: function(data) {
      //do something with success data
    }
  }, {
    url: 'url1',
    dataType: 'json',
    success: function(data) {
      //do something with success data
    }
  }, {
    url: 'url2',
    dataType: 'json',
    success: function(response) {
      //do something with success data
    }
  }], function() {
    // logic after all the calls are completed.
  });
}
Sanjeev Kumar Dangi
quelle
2

Ich empfehle dringend, $ .when () zu verwenden, wenn Sie bei Null anfangen.

Obwohl diese Frage über Millionen Antworten hat, fand ich für meinen Fall nichts Nützliches. Angenommen, Sie müssen sich mit einer vorhandenen Codebasis befassen, bereits einige Ajax-Aufrufe tätigen und möchten nicht die Komplexität von Versprechungen einführen und / oder das Ganze wiederholen.

Wir können leicht die Vorteile von jQuery nehmen .data, .onund .triggerFunktionen , die seit immer ein Teil von jQuery gewesen sein.

Codepen

Das Gute an meiner Lösung ist:

  • Es ist offensichtlich, wovon der Rückruf genau abhängt

  • Der Funktion triggerNowOrOnLoadedist es egal, ob die Daten bereits geladen wurden oder wir noch darauf warten

  • Es ist super einfach, es in einen vorhandenen Code einzufügen

$(function() {

  // wait for posts to be loaded
  triggerNowOrOnLoaded("posts", function() {
    var $body = $("body");
    var posts = $body.data("posts");

    $body.append("<div>Posts: " + posts.length + "</div>");
  });


  // some ajax requests
  $.getJSON("https://jsonplaceholder.typicode.com/posts", function(data) {
    $("body").data("posts", data).trigger("posts");
  });

  // doesn't matter if the `triggerNowOrOnLoaded` is called after or before the actual requests 
  $.getJSON("https://jsonplaceholder.typicode.com/users", function(data) {
    $("body").data("users", data).trigger("users");
  });


  // wait for both types
  triggerNowOrOnLoaded(["posts", "users"], function() {
    var $body = $("body");
    var posts = $body.data("posts");
    var users = $body.data("users");

    $body.append("<div>Posts: " + posts.length + " and Users: " + users.length + "</div>");
  });

  // works even if everything has already loaded!
  setTimeout(function() {

    // triggers immediately since users have been already loaded
    triggerNowOrOnLoaded("users", function() {
      var $body = $("body");
      var users = $body.data("users");

      $body.append("<div>Delayed Users: " + users.length + "</div>");
    });

  }, 2000); // 2 seconds

});

// helper function
function triggerNowOrOnLoaded(types, callback) {
  types = $.isArray(types) ? types : [types];

  var $body = $("body");

  var waitForTypes = [];
  $.each(types, function(i, type) {

    if (typeof $body.data(type) === 'undefined') {
      waitForTypes.push(type);
    }
  });

  var isDataReady = waitForTypes.length === 0;
  if (isDataReady) {
    callback();
    return;
  }

  // wait for the last type and run this function again for the rest of the types
  var waitFor = waitForTypes.pop();
  $body.on(waitFor, function() {
    // remove event handler - we only want the stuff triggered once
    $body.off(waitFor);

    triggerNowOrOnLoaded(waitForTypes, callback);
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>Hi!</body>

cilf
quelle
2

Ich verwende die Größenprüfung, wenn alle Ajax-Ladevorgänge abgeschlossen sind

function get_ajax(link, data, callback) {
    $.ajax({
        url: link,
        type: "GET",
        data: data,
        dataType: "json",
        success: function (data, status, jqXHR) {
            callback(jqXHR.status, data)
        },
        error: function (jqXHR, status, err) {
            callback(jqXHR.status, jqXHR);
        },
        complete: function (jqXHR, status) {
        }
    })
}

function run_list_ajax(callback){
    var size=0;
    var max= 10;
    for (let index = 0; index < max; index++) {
        var link = 'http://api.jquery.com/ajaxStop/';
        var data={i:index}
        get_ajax(link,data,function(status, data){
            console.log(index)
            if(size>max-2){
                callback('done')
            }
            size++
            
        })
    }
}

run_list_ajax(function(info){
    console.log(info)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

Tranchau
quelle
Daumen hoch zu deinem Beispiel.
MarwaAhmad
2

Um Alex 'Antwort zu erweitern, habe ich ein Beispiel mit variablen Argumenten und Versprechungen. Ich wollte Bilder über Ajax laden und sie auf der Seite anzeigen, nachdem sie alle geladen wurden.

Dazu habe ich Folgendes verwendet:

let urlCreator = window.URL || window.webkitURL;

// Helper function for making ajax requests
let fetch = function(url) {
    return $.ajax({
        type: "get",
        xhrFields: {
            responseType: "blob"
        },
        url: url,
    });
};

// Map the array of urls to an array of ajax requests
let urls = ["https://placekitten.com/200/250", "https://placekitten.com/300/250"];
let files = urls.map(url => fetch(url));

// Use the spread operator to wait for all requests
$.when(...files).then(function() {
    // If we have multiple urls, then loop through
    if(urls.length > 1) {
        // Create image urls and tags for each result
        Array.from(arguments).forEach(data => {
            let imageUrl = urlCreator.createObjectURL(data[0]);
            let img = `<img src=${imageUrl}>`;
            $("#image_container").append(img);
        });
    }
    else {
        // Create image source and tag for result
        let imageUrl = urlCreator.createObjectURL(arguments[0]);
        let img = `<img src=${imageUrl}>`;
        $("#image_container").append(img);
    }
});

Aktualisiert für einzelne oder mehrere URLs: https://jsfiddle.net/euypj5w9/

GammaGames
quelle
2

Wie in anderen Antworten erwähnt, können Sie ajaxStop()warten, bis alle Ajax-Anforderungen abgeschlossen sind.

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

Wenn Sie dies für eine bestimmte ajax()Anfrage tun möchten, können Sie am besten die complete()Methode innerhalb der bestimmten Ajax-Anfrage verwenden:

$.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 nur auf ein paar und bestimmte Ajax-Anfragen warten müssen? Verwenden Sie die wunderbaren Javascript- Versprechen , um zu warten, bis die Ajax, auf die Sie warten möchten, fertig sind. Ich habe ein kurzes, einfaches und lesbares Beispiel gemacht, um Ihnen zu zeigen, wie Versprechen mit Ajax funktionieren.
Bitte schauen Sie sich das nächste Beispiel an . Ich habe setTimeoutdas Beispiel immer klarer gemacht.

// 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>

Silberner Surfer
quelle
0

Ich fand einen einfachen Weg, es mit shift()

function waitReq(id)
{
  jQuery.ajax(
  {
    type: 'POST',
    url: ajaxurl,
    data:
    {
      "page": id
    },
    success: function(resp)
    {
      ...........
      // check array length if not "0" continue to use next array value
      if(ids.length)
      {
        waitReq(ids.shift()); // 2
      )
    },
    error: function(resp)
    {
      ....................
      if(ids.length)
      {
        waitReq(ids.shift());
      )
    }
  });
}

var ids = [1, 2, 3, 4, 5];    
// shift() = delete first array value (then print)
waitReq(ids.shift()); // print 1
uingtea
quelle
0

Meine Lösung lautet wie folgt

var request;
...
'services': {
  'GetAddressBookData': function() {
    //This is the primary service that loads all addressbook records 
    request = $.ajax({
      type: "POST",
      url: "Default.aspx/GetAddressBook",
      contentType: "application/json;",
      dataType: "json"
    });
  },

  ...

  'apps': {
    'AddressBook': {
      'data': "",
      'Start': function() {
          ...services.GetAddressBookData();
          request.done(function(response) {
            trace("ajax successful");
            ..apps.AddressBook.data = response['d'];
            ...apps.AddressBook.Filter();
          });
          request.fail(function(xhr, textStatus, errorThrown) {
            trace("ajax failed - " + errorThrown);
          });

Hat ganz gut funktioniert. Ich habe viele verschiedene Möglichkeiten ausprobiert, aber ich fand, dass dies die einfachste und am besten wiederverwendbare ist. Ich hoffe es hilft

Eric Sean Moore
quelle
0

Schau dir meine Lösung an:

1. Fügen Sie diese Funktion (und Variable) in Ihre Javascript-Datei ein:

var runFunctionQueue_callback;

function runFunctionQueue(f, index, callback) {

  var next_index = index + 1

  if (callback !== undefined) runFunctionQueue_callback = callback;

  if (f[next_index] !== undefined) {
    console.log(index + ' Next function avalaible -> ' + next_index);
    $.ajax({
      type: 'GET',
      url: f[index].file,
      data: (f[index].data),
      complete: function() {
        runFunctionQueue(f, next_index);
      }
    });
  } else {
    console.log(index + ' Last function');
    $.ajax({
      type: 'GET',
      url: f[index].file,
      data: (f[index].data),
      async: false,
      complete: runFunctionQueue_callback
    });
  }
}

2. Erstellen Sie ein Array mit Ihren Anforderungen wie folgt:

var f = [
           {file: 'file_path', data: {action: 'action', data: 'any_data}},
           {file: 'file_path', data: {action: 'action', data: 'any_data}},
           {file: 'file_path', data: {action: 'action', data: 'any_data}},
           {file: 'file_path', data: {action: 'action', data: 'any_data}}
        ];

3. Rückruffunktion erstellen:

function Function_callback() {
  alert('done');
}

4. Rufen Sie die Funktion runFunctionQueue mit den folgenden Parametern auf:

runFunctionQueue(f, 0, QuestionInsert_callback);
// first parameter: array with requests data
// second parameter: start from first request
// third parameter: the callback function
Briganti
quelle
-4

Versuchen Sie es auf diese Weise. Machen Sie eine Schleife innerhalb der Java-Skriptfunktion, um zu warten, bis der Ajax-Aufruf beendet ist.

function getLabelById(id)
{
    var label = '';
    var done = false;
    $.ajax({
       cache: false,
       url: "YourMvcActionUrl",
       type: "GET",
       dataType: "json",
       async: false,
       error: function (result) {
         label='undefined';
         done = true;
        },
       success: function (result) {
            label = result.Message;
            done = true;
        }
     });

   //A loop to check done if ajax call is done.
   while (!done)
   {
      setTimeout(function(){ },500); // take a sleep.
   }

    return label;
}
ChinaHelloWorld
quelle
1
Ihr setTimeout()tut NICHT take a sleep. In diesem Fall blockieren Sie einfach alle Registerkarten, bis sie donewahr werden.
Alexis Wilke
1
Ich denke, das ist das Thema, nach dem gefragt wird: "Warten Sie, bis alle jQuery Ajax-Anforderungen abgeschlossen sind".
ChinaHelloWorld
1
Haben Sie diesen Code getestet? Ich gehe davon aus, dass dies doneniemals der Fall sein wird, solange die while-Schleife noch läuft. Wenn die while-Schleife ausgeführt wird, kann die Ereignisschleife nicht fortgesetzt werden und führt daher niemals den Rückruf zum Ajax-Erfolg aus.
Kevin B