Wie Ergebnisse nach asynchroner Funktion abrufen?

Question

Ich habe Beiträge über asynchrone Anrufe und Rückrufe gelesen, aber ich habe meine Antwort nicht gefunden.

Ich habe eine einfache Dropdown-Taste auf meiner Boostrap-Seite, die Benutzer Werte ändern lassen. Also, wenn Knopf geklickt wird, rufe ich eine Ajax-Funktion, um den Job zu machen, und wir müssen auf das Ergebnis der Aktion warten.

Danach möchte ich Dropdown-Schaltfläche Wert ändern und dem Benutzer das Ergebnis der Operation geben.

Das ist also meine Callback-Funktion mit Ajax (dem großen Werken):

function changePermissions(user, role, callBack){ 
    var ret = false; 
    $.ajax({ 
    url: "lib/edit_permissions.php", 
    data: {'user': user, 'role': role}, 
    type: 'post', 
    dataType: 'json', 
    success: function(data) { 
     if($.isPlainObject(data) && data.state === 200){ 
     ret = true; 
     } 
     else { 
     console.log(data.message); 
     } 
     return callBack(ret); 
    }, 
    error: function (xhr, ajaxOptions, thrownError) { 
     console.log("thrown error"); 
     return callBack(ret); 
    } 
    }); 
} 

Wenn ich versuche, das Ergebnis außerhalb der Funktion abzurufen, wird der Wert nicht definiert ist, verstehe ich, dass es ein asynchrones Problem ist:

Wenn ich versuche, das Ergebnis innerhalb der Funktion abzurufen, ist das Ergebnis in Ordnung. Aber ich kann meinen Button-Text-Wert nicht aktualisieren, '$ this' scheint undefiniert zu sein:

$(".dropdown-menu li a").click(function(){ 
    var newrole = $(this).text(); 
    var user = $(this).parents(".dropdown").closest('td').prev('td').text(); 

    changePermissions(user, newrole, function(ret) { 
    if (ret){ 
     $(this).parents(".dropdown").find('.btn').html(newrole + ' <span class="caret"></span>'); 
     console.log("user permissions successfully updated."); 
    } 
    else{ 
     console.log("error to update"); 
    } 
    }); 
}); 

Wie kann ich das tun?

Answer 1

Das ist normal, weil sich this innerhalb des Rückrufs nicht auf DOM-Objekt oder Ziel des Ereignisses bezieht. Es überschreibt. Um es zu verwenden, müssen Sie eine lokale Kopie davon erstellen und diese Kopie innerhalb des Rückrufs verwenden. Hier ist Code.

$(".dropdown-menu li a").click(function(){ 
    var newrole = $(this).text(); 
    var user = $(this).parents(".dropdown").closest('td').prev('td').text(); 

    //make copy of this 
var self = this; 
    changePermissions(user, newrole, function(ret) { 
    if (ret){ 
    //use that copy 
     $(self).parents(".dropdown").find('.btn').html(newrole + ' <span class="caret"></span>'); 
     console.log("user permissions successfully updated."); 
    } 
    else{ 
     console.log("error to update"); 
    } 
    }); 
});