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

当用户从网站登录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(...)函数时它是异步，也就是说，你的代码没有停止并等待结果，它不会等待你要提供的回调。相反，显示欢迎消息的下三行代码将在回调发生之前执行，这意味着name变量在您尝试使用它时仍然是空白的。解决方案与其他答案一样，即将欢迎消息代码移动到回调函数中，这样在设置之前不要尝试使用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'); }; }); }

（顺便说一句，这是我不喜欢单用变量说话：除非你在你网页的其他地方使用它（可能你不是因为它是你的display_welcome()功能的本地）你不喜欢根本不需要name变量，只需在回调中直接使用response.first_name。）

从javascript回调函数中检索值

5 个答案: