非同期関数の結果を取得する方法は？

Question

私は非同期のコールとコールバックについての記事を読んだが、私の答えは見つからなかった。

ユーザーが値を変更できるようにする私のブーストページには単純なドロップダウンボタンがあります。 ボタンがクリックされると、私は仕事をするために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"); 
    } 
    }); 
});