如何延遲執行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完成初始化

回答

相關問題