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

当用户从网站登录 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');
变量名称 = '';

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 即可。）