javascript - 异步函数后如何检索结果？

Question

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

我的 boostrap 页面上有一个简单的下拉按钮，可以让用户更改值。 因此，当单击按钮时，我调用 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");
}

如果我尝试在函数内检索结果，结果就可以了。但我无法更新按钮文本值，“$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");
    }
  });
});