如何延迟执行JS函数，直到Facebook JS SDK完成初始化

-1

因此，我使用Facebook JavaScript SDK以允许用户登录到我的应用程序。我在另一个JavaScript文件中使用HTML文件中的Facebook SDK。第二个JS文件从SDK内部访问FB对象。该HTML基本上是建立像这样如何延迟执行JS函数，直到Facebook JS SDK完成初始化

<!DOCTYPE HTML> 
<html> 
    <body> 
      <script src = 'FacebookSDK.js' type = 'text/javascript'></script> 
    </body> 
      <script src = 'Controller.js' type = 'text/javascript'></script> 
</html>

当我尝试访问Controller.js内的FB对象文件中像这样

  FB.getLoginStatus(function(response) { 
       console.log(response.authResponse.userID); 
      });

我得到一个错误说

pollcreationClient.js:4 Uncaught ReferenceError: FB is not defined

所以，显然我的Controller.js文件在Facebook SDK初始化之前就已经执行了。我认为将第二个JS文件加载到body标签外部会为SDK提供足够的时间来加载和初始化。但是，这显然不是这种情况。我该如何确保我的Controller.js文件函数（我称之为FB对象）在SDK文件完成执行之前不会执行？

以供参考，在这里是Facebook的SDK文件

// This is called with the results from from FB.getLoginStatus(). 
    function statusChangeCallback(response) { 
     console.log('statusChangeCallback'); 
     console.log(response); 

     // The response object is returned with a status field that lets the 
     // app know the current login status of the person. 
     // Full docs on the response object can be found in the documentation 
     // for FB.getLoginStatus(). 
     if (response.status === 'connected') { 
      // Logged into your app and Facebook. 
      testAPI(); 
     } 
     else if (response.status === 'not_authorized') { 
      // The person is logged into Facebook, but not your app. 
      document.getElementById('status').innerHTML = 'Please log ' + 
       'into this app.'; 
     } 
     else { 
      // The person is not logged into Facebook, so we're not sure if 
      // they are logged into this app or not. 
      document.getElementById('status').innerHTML = 'Please log ' + 
       'into Facebook.'; 
     } 
    } 

    // This function is called when someone finishes with the Login 
    // Button. See the onlogin handler attached to it in the sample 
    // code below. 
    function checkLoginState() { 
     FB.getLoginStatus(function(response) { 
      statusChangeCallback(response); 
     }); 
    } 

    window.fbAsyncInit = function() { 
     FB.init({ 
      appId: '332044557128106', 
      cookie: true, // enable cookies to allow the server to access 
      // the session 
      xfbml: true, // parse social plugins on this page 
      version: 'v2.5' // use graph api version 2.5 
     }); 

     // Now that we've initialized the JavaScript SDK, we call 
     // FB.getLoginStatus(). This function gets the state of the 
     // person visiting this page and can return one of three states to 
     // the callback you provide. They can be: 
     // 
     // 1. Logged into your app ('connected') 
     // 2. Logged into Facebook, but not your app ('not_authorized') 
     // 3. Not logged into Facebook and can't tell if they are logged into 
     // your app or not. 
     // 
     // These three cases are handled in the callback function. 

     FB.getLoginStatus(function(response) { 
      statusChangeCallback(response); 
     }); 

    }; 

    // Load the SDK asynchronously 
    (function(d, s, id) { 
     var js, fjs = d.getElementsByTagName(s)[0]; 
     if (d.getElementById(id)) return; 
     js = d.createElement(s); 
     js.id = id; 
     js.src = "//connect.facebook.net/en_US/sdk.js"; 
     fjs.parentNode.insertBefore(js, fjs); 
    }(document, 'script', 'facebook-jssdk')); 

    // Here we run a very simple test of the Graph API after login is 
    // successful. See statusChangeCallback() for when this call is made. 
    function testAPI() { 
     console.log('Welcome! Fetching your information.... '); 
     FB.api('/me', function(response) { 
      console.log('Successful login for: ' + response.name); 
      document.getElementById('status').innerHTML = 
       'Thanks for logging in, ' + response.name + '!'; 
     }); 
    }

来源

2016-09-27 random_coder_101

window.FB怎么样？ – darham

是facebook.js甚至加载？关闭body标签后也不应该有脚本。在 – charlietfl

@darham里面输入 - window.FB呢？这是否意味着window.FB函数只会在窗口中检测到FB对象时执行？ –

我找到一种解决方法，以我的问题。注意：它不提供完美的解决方案，更多的是拼凑工作。我没有使用评论中提到的解决方案，因为他们不适合我的情况。希望这可能对其他人有用。

认为此答案这里 How to workaround 'FB is not defined'?

if (typeof FB !== 'undefined' && FB !== null) { 
      FB.Event.subscribe('auth.authResponseChange', function() { 
       FB.getLoginStatus(function(response) { 
        console.log('Response from in here'); 
        console.log(response); 
        $('.submit-butt').on('click', function() { 
         console.log('From in here'); 
         ajaxFunctions.ready(ajaxFunctions.ajaxRequest('POST', appUrl + '/poll-create', response.authResponse, function(data) { 

         })); 
        }); 
       }); 
      }); 
     }else{ 
      location.reload(); 
     }

基本上，这种检查FB对象是否被定义和存在。如果是这样，它会运行代码，如果没有，我已经设置页面重新加载。这适用于我，因为我的问题是，在某些情况下FB对象没有被定义，而在其他时间有效。再次，这不是一个很好的解决方案，但它为我做了这项工作。

来源

2016-09-28 11:53:11

如何延迟执行JS函数，直到Facebook JS SDK完成初始化

回答

相关问题