javascriptコールバック関数から値を取得する

Question

var display_welcome = function(){ 
    var fb_login_button = jQuery('#fb_login_button'); 
    var fb_welcome = jQuery('#fb_welcome'); 
    var name = ''; 

    FB.api('/me',function(response){ 
     console.log(response); 
     name = response.first_name; 
    }); 

    fb_login_button.css('display', 'none'); 
    fb_welcome.html('<span>Welcome, ' + name + '</span>'); 
    fb_welcome.css('display', 'block'); 
}; 

この関数は、ユーザーがWebサイトからFacebookにログインするときに呼び出されます。目標は、ユーザーのファーストネームでユーザーにウェルカムメッセージを表示することです。問題は、変数 'name'がFB.api（）のコールバックメソッドのスコープ内のローカル変数であることです。この値を抽出して、それを私の関数 'display_welcome'で使用する最良の方法は何ですか？

Answer 1

これらのコード行をAPIのコールバックに移動する方法はありますか？同様に、

var display_welcome = function（）{ var fb_login_button = jQuery（ '＃fb_login_button'）; var fb_welcome = jQuery（ '＃fb_welcome'）; var name = '';

FB.api('/me',function(response){ 
    console.log(response); 
    name = response.first_name; 

    fb_login_button.hide(); 
    fb_welcome.html('<span>Welcome, ' + name + '</span>'); 
    fb_welcome.show(); 
}); 

}

Answer 2

私がやるだろう：

jQuery(document).ready(function($){ 

    FB.api('/me',function(response){ 
     var fb_login_button = $('#fb_login_button'), 
      fb_welcome = $('#fb_welcome'); 

     fb_login_button.css('display', 'none'); 
     fb_welcome.html('<span>Welcome, ' + response.first_name + '</span>') 
        .css('display', 'block'); 

    }); 
}); 

Answer 3

は、コールバック関数でコードの残りの部分を置きます。

Answer 4

FB.init（）の後にイベントを購読することでユーザー情報を取得するのが最善の方法だと思います。このような何か：

window.fbAsyncInit = function() { 
    FB.init({ 
     appId : 'YOUR APP ID', 
     status : true, // check login status 
     cookie : true, // enable cookies to allow the server to access the session 
     xfbml : true // parse XFBML 
    }); 

    FB.Event.subscribe('auth.login', function(response) { 
     // do something with response 
     display_welcome(); 
    }); 

    FB.getLoginStatus(function(response) { 
     if (response.session) { 
      // logged in and connected user, someone you know 
      display_welcome(); 
     } 
    }); 
    }; 


var display_welcome = function(){ 

    FB.api('/me',function(response){ 
     var fb_login_button = jQuery('#fb_login_button'); 
     var fb_welcome = jQuery('#fb_welcome'); 
     var name = response.first_name; 

     fb_login_button.css('display', 'none'); 
     fb_welcome.html('<span>Welcome, ' + name + '</span>'); 
     fb_welcome.css('display', 'block'); 
    }); 

}; 

Answer 5

問題は、あなたがFB.api(...)関数を呼び出すとき、それはあなたのコードが停止し、その結果を待たない、つまり、非同期であるということです、それはコールバックを待ちません。あなたは呼ばれるために供給します。代わりに、ウェルカムメッセージを表示する次の3行のコードはの前に実行され、コールバックが発生します。つまり、name変数は、使用しようとする時点で空白になります。さておき、このよう

var display_welcome = function(){ 
    var fb_login_button = jQuery('#fb_login_button'); 
    var fb_welcome = jQuery('#fb_welcome'); 
    var name = ''; 

    FB.api('/me',function(response){ 
    console.log(response); 
    name = response.first_name; 
    fb_login_button.css('display', 'none'); 
    fb_welcome.html('<span>Welcome, ' + name + '</span>'); 
    fb_welcome.css('display', 'block'); }; 
    }); 
} 

を（：ソリューションは、あなたはそれが設定されるまでnameを使用しようとしないように、コールバック関数にあなたのウェルカムメッセージのコードを移動し、他の回答、すなわちあたりのようですおそらくnameという変数が全く必要ではないので、response.first_nameを直接使用してください（おそらく、あなたのdisplay_welcome()関数のローカルではないのでおそらくあなたのページの別の場所で使っていない限り）。