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

如果我尝试在函数内部检索结果，结果就可以了。但我无法更新我的按钮文字值，＆＃39; $ this＆＃39;似乎未定义：

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

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

1 个答案: