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

【问题标题】：How to delay execution of JS functions until Facebook JS SDK has finished initializing如何延迟 JS 函数的执行，直到 Facebook JS SDK 完成初始化
【发布时间】：2016-09-27 19:22:00
【问题描述】：

所以，我使用 Facebook JavaScript SDK 来允许用户登录我的应用程序。我在 HTML 文件中使用 Facebook SDK 以及另一个 JavaScript 文件。第二个 JS 文件从 SDK 内部访问 FB 对象。 HTML基本上是这样设置的

<!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 加载和初始化提供足够的时间。但是，这显然不是这样的。我该怎么做才能确保我调用 FB 对象的 Controller.js 文件函数在 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 + '!';
        });
    }

【问题讨论】：

window.FB怎么样？
facebook.js 还在加载吗？关闭body标签后也不应该有脚本..把它放在里面
@darham - window.FB 怎么样？是不是说window.FB函数只有在window中检测到FB对象时才会执行？
在窗口实例中寻找一个全局对象，为什么不把你的脚本放在body标签里面呢？
fbAsyncInit 回调是了解 FB SDK 何时初始化的唯一可靠方法。不知道你为什么要这么做……

标签： javascript facebook

【解决方案1】：

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

在这里找到这个答案 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 对象，而它在其他时候有效。同样，这不是一个很好的解决方案，但它为我完成了工作。

【讨论】：