Как получить результаты после асинхронной функции?

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

Если я попытаюсь получить результат внутри функции, результат будет ОК. Но я не могу обновить мою кнопку текстовое значение «$ это» кажется неопределенным:

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