Wie können Sie mit .when (). Then () eine Funktion auslösen, wenn Sie in .when () verzögerte Objekte verwenden?

Question

Jun 19, 2014, 02:36 PM

Wie können Sie mit .when (). Then () eine Funktion auslösen, wenn Sie in .when () verzögerte Objekte verwenden?

Ich habe eine Seite, auf der ich eine variable Anzahl von AJAX-Aufrufen ausführen kann, die bei einem allgemeinen Ereignis ausgelöst werden. Die AJAX-Aufrufe selbst sollen verwandte Felder in einer SQL-Datenbank aktualisieren. Sobald alle Anrufe abgeschlossen sind, möchte ich die Seite aktualisieren, damit sie jetzt die gerade vorgenommenen Änderungen widerspiegelt.

Ich habe die folgende Frage / Antwort hier verwendet, um so weit zu kommen.jAbfragen, wenn jedes abgeschlossen ist, Funktion auslösen

Hier ist mein Code soweit:

var team_update = function(e) {
    var $items = $('.sortable-items');
    var XHRs = [];

    $items.each(function(){
        var team_id = $( this ).attr("id");
        var data =  {
            tid: team_id,
            users: $('#' + team_id).sortable('toArray')
            };

        XHRs.push(
            $.ajax({ 
                type: "POST", 
                url: "update.php", 
                data: data, 
                complete: function(data){
                } 
            })  
        );

    });

    $.when(XHRs).then(function(){
        console.log('Refreshing Screen');
        $('#content-wrapper').load( 'index.php' );
    });

}

Was ich erwartet hatte, ist das$('#content-wrapper').load( 'index.php' ); würde feuern, sobald alle meine ajax () -Anfragen abgeschlossen waren. Was jedoch zu passieren scheint, ist, dass der Rückruf ausgelöst wird, sobald alle Anforderungen gesendet wurden, nicht notwendigerweise nachdem sie abgeschlossen wurden, und daher enthält meine Seitenaktualisierung manchmal noch 'alte' Daten.

Die Grafik unten zeigt meine anfängliche Seitenladung oben, die ignoriert werden kann. Es sind die nächsten 4 Einträge, die das Problem anzeigen. Es gibt 3 POST-Anforderungen, die meine 3 Ajax-Aufrufe zum Aktualisieren der Datenbank sind, und das letzte GET, das die Seitenaktualisierung ist. Die Seitenaktualisierung GET wird ausgelöst, nachdem alle 3 Ajax-Aufrufe gesendet wurden, es wird jedoch nicht gewartet, bis der letzte Ajax-Aufruf abgeschlossen ist, bevor er ausgelöst wird. Infolgedessen werden alte Daten abgerufen, bevor der vorherige Ajac-Aufruf die Aktualisierung der Datenbank abgeschlossen hat.

Was mache ich hier falsch?