如何在異步函數之後檢索結果？

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