Récupération de la valeur depuis la fonction de rappel 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'); 
}; 

Cette fonction est appelée lorsqu'un utilisateur se connecte à Facebook à partir d'un site Web. L'objectif est d'afficher un message de bienvenue à l'utilisateur avec le prénom de l'utilisateur. Le problème est que la variable 'nom' est une variable locale dans la portée de la méthode de rappel de FB.api(). Quel est le meilleur moyen d'extraire cette valeur et de l'utiliser dans ma fonction 'display_welcome'?

Answer 1

Que diriez-vous de déplacer ces lignes de code dans le rappel de l'API? Comme ceci:

var affichage_welcome = fonction() { 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

Je ferais:

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

Mettez le reste de votre code dans la fonction de rappel.

Answer 4

Je pense qu'il serait préférable d'obtenir des informations d'utilisateur en s'abonnant à un événement après FB.init(). Quelque chose comme ceci:

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

Le problème est que lorsque vous appelez la fonction FB.api(...) il est asynchrone, qui est, votre code ne s'arrête pas et attendre le résultat, il n'attend pas le rappel vous fournissez pour être appelé. Au lieu de cela, les trois lignes de code suivantes qui affichent votre message de bienvenue seront exécutées avant le le rappel se produit, ce qui signifie que la variable name sera toujours vide au moment où vous essayez de l'utiliser. La solution est aussi par les autres réponses, par exemple, déplacer votre code de message de bienvenue dans la fonction de rappel afin que vous ne pas essayer d'utiliser name jusqu'à ce qu'il a été fixé:

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

(En aparté, et ce est mon antipathie pour les variables à usage unique qui parlent: A moins que vous ne l'utilisiez ailleurs sur votre page (ce qui n'est probablement pas le cas car il est local à votre fonction display_welcome()) vous n'avez pas vraiment besoin de la variable name, utilisez response.first_name directement dans le rappel.)