Question

To begin my page i do a check with facebook to get the login status of the user. I then create a namespace within the window object for use in other javascript files. Before I load any other javascript i need this namespace to be created, or else it will be undefined when i try to access it. Sometimes it completes first, and sometimes it does not. How can i make sure that it happens correctly every time?

.
.
.
        FB.getLoginStatus(function(response) {
          // store data on the user inside of a namespace 
          // inside of the window object so it can be accessed
          // from anywhere. Use this like '$_SESSION'
          console.log('doing it');
          window.easyUserData = {
            fbRespose: response,
            site: <?php echo '"'.$site.'"'; ?>
          };
        })
      };

      (function(d) {
        var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        ref.parentNode.insertBefore(js, ref);
      }(document))
    </script>
    <!-- Load the script "js/main.js" as our entry point for require -->
    <script data-main="js/main" src="lib/Require/require.js"></script>

specifically, i need the:

<script data-main="js/main" src="lib/Require/require.js"></script>

to not happen until the facebook function is complete

Answer 1

Move the code relying on the namespace into the Facebook callback. If it’s the <script data-main="js/main" src="lib/Require/require.js"></script>, create the script element dynamically:

  // ...

  FB.getLoginStatus(function(response) {
    // store data on the user inside of a namespace 
    // inside of the window object so it can be accessed
    // from anywhere. Use this like '$_SESSION'
    console.log('doing it');
    window.easyUserData = {
      fbRespose: response,
      site: <?php echo '"'.$site.'"'; ?>
    };

    // Create the script element when ready
    var script = document.createElement('script');
    script.setAttribute("data-main", "js/main");
    script.src = "lib/Require/require.js";
    document.getElementsByTagName('script')[0].parentNode.appendChild(script);
    // Or instead of `document.getElementsByTagName('script')[0].parentNode`
    // you can use `document.documentElement` or `document.getElementsByTagName('head')[0]
    // or a few others
  })
};