Schwierigkeiten, Rückrufe in JavaScript mit Ajax zu verwenden

Question

Ich habe Probleme mit der Implementierung eines Rückrufs in meinem JavaScript, das AJAX verwendet. Zunächst einmal, liest das Skript aus einer Datei und Orten in eine Variable:

jQuery.get('userdata/' + username + '.txt', function(data) { 
    var userid = data; 
}); 

Dann wird diese Variable in der folgenden Funktion verwendet werden, die aus einer .json Datei liest und nehmen das Ergebnis, dass nur die enthält Wert in userid.

function loadContacts(filter) { 
    var contacts = (function() { 
     var contacts = null; 
     $.ajax({ 
      'url': 'userdata/' + username + '.json', 
      'dataType': "json", 
      'success': function (data) { 
       contacts = data; 
       contacts = contacts.filter(function(i) { 
        return i.id == userid; 
       }); 
      } 
     }); 
     return contacts; 
    })(); 
    // some code for (filter) here 
} 

Das Problem hierbei ist, dass vor jQuery Zeit hatte, userid zu erstellen und aus der Datei angegeben ist, lesen Sie die loadContacts Funktion bereits zu lesen versucht, von userid so dass es wieder mit einem nicht identifizierten variablen Fehler kommt.

Ich habe die letzten 2/3 Stunden damit verbracht zu lernen, wie man einen Callback in AJAX implementiert, aber ich hatte kein Glück, nachdem ich einige verschiedene Varianten ausprobiert habe.

Ich verstehe, dass ein Rückruf durch die Implementierung, im Wesentlichen bin ich verzögert die loadContacts Funktion für eine Erfolgsmeldung von jQuery.get zurück zu warten, so dass er nicht versucht, für userid suchen, bevor es erstellt worden ist, kann ich einfach nicht scheinen, um es zur Arbeit zu bringen.

Konnte mir jemand helfen?

Ich habe schon versucht, von diesem duplicate Beitrag zu lernen, aber ich verstehe es nicht?

Answer 1

Da die AJAX-Anforderung asynchron ist, geben Sie einen Wert von Ihrer loadContacts()-Funktion zurück, bevor Daten empfangen werden. Sie müssen eine Callback-Funktion an die Funktion übergeben, die nach Abschluss der AJAX-Anforderung ausgeführt werden kann. So etwas wie das:

function loadContacts(filter, callback) { 
    $.ajax({ 
     url: 'userdata/' + username + '.json', 
     dataType: "json", 
     success: function (data) { 
      var contacts = data.filter(function(i) { 
       return i.id == userid; 
      }); 
      callback && callback(contacts); 
     } 
    }); 
} 

function doSomethingWithContacts(contacts) { 
    console.log(contacts); 
} 

loadContacts('foo', doSomethingWithContacts); 

Answer 2

einfachste Weg wäre, die loadContacts-Funktion aus dem Ergebnis der ersten Abrufanforderung aufzurufen.

var filter = function(){...}; 
var contacts = false; 
jQuery.get('userdata/' + username + '.txt', function(data) { 
    var userid = data; 
    contacts = loadContacts(filter); 
}); 

Sie auch die Verwendung der latenten Funktionen von jQuery machen könnte

Answer 3

Wie wärs mit einem kleinen Ausflug in die Versprechungen
Daten asynchron zu holen, diese Anrufe zu synchronisieren und die Daten zu verarbeiten.

//creating a few "promises" 
var pUserId = $.get('userdata/' + username + '.txt'); 
var pData = $.ajax({ 
    'url': 'userdata/' + username + '.json', 
    'dataType': "json" 
}); 

//filter pData by pUserId, as soon as both are available 
var pUserdata = $.when(pUserId, pData).then(function(userId, data){ 
    return data.filter(function(item){ 
     return item.id === userId 
    }) 
}); 

//just log these three, as soon as they are available 
$.when(pUserId, pData, pUserdata).done(function(userId, data, userdata){ 
    console.log("userId:", userId); 
    console.log("data:", data); 
    console.log("userdata:", userdata); 
}); 

Und es liegt an Ihnen, wie Sie das in bestimmte Funktionen einbinden möchten.

Und mischen Sie keinen Filter mit einer Funktion, die einen Ajax-Aufruf ausführt. Denn dann müssen Sie jedes Mal einen Ajax-Aufruf durchführen, wenn Sie eine Teilmenge dieser Daten wünschen. Trennen Sie die Aktualisierung der Daten und die Filterung.