如何在异步函数之后检索结果？

Question

我已阅读异步调用和回调的帖子，但我没有找到我的答案。

我在我的助推器页面上有一个简单的下拉按钮，让用户更改值。 所以当点击按钮时，我会调用一个ajax函数来完成这个工作，我们必须等待这个动作的结果。

之后，我想改变下拉按钮的值，并将操作结果给用户。

所以这是我用Ajax回调函数（它的伟大工程）：

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); 
    } 
    }); 
} 

如果我尝试检索功能之外的结果，该值是不确定的，我明白，这是一个异步的问题：

$(".dropdown-menu li a").click(function(){ 
var newrole = $(this).text(); 

var result=false; 
result = changePermissions(user, newrole, function(ret) { 
      return ret; 
     }); 
} 

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

如果我尝试检索函数内部的结果，结果是OK。但我无法更新我的按钮文本值，'$ this'似乎没有定义：

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

我该怎么做？

Answer 1

这很正常，因为this里面的回调没有指DOM对象或事件的目标。它覆盖。要使用它，你需要创建一个本地副本并在回调中使用该副本。这是代码。

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