Получение значения из функции обратного вызова 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'); 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

Проблема в том, что когда вы вызываете функцию 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 непосредственно в обратном вызове.)

Answer 3

Я думаю, что было бы лучше получить информацию о пользователе, подписавшись на событие после 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 4

Поместите оставшуюся часть кода в функцию обратного вызова.

Answer 5

Я бы сделал:

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

    });
});