title: How to delay my javascript code until a JSON file is loaded?
body: <p>I have a web application built with jQuery, and I need to load some JSON data <em>before</em> anything else is done. Currently, I'm doing it like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
    ...
    &lt;script type="text/javascript"&gt;
      // Load the data (directly injected into the HTML)
      var json = { ... };
  
      // Once the full DOM is loaded, do whatever I need
      $(whatever);
  
      function whatever() { ... }
    &lt;/script&gt;
    ...
  &lt;/html&gt;
  </code></pre>
  
  <p>It works, but it's extremely ugly. I'd rather load the actual JSON file, for example using jQuery's <a href="https://api.jquery.com/jQuery.getJSON" rel="nofollow noreferrer"><code>getJSON</code></a> with a callback function. But calling AJAX functions in a synchronous way isn't allowed anymore (<a href="https://api.jquery.com/jQuery.ajax/" rel="nofollow noreferrer">at least with jQuery</a>). So... how do I make sure that my <code>whatever</code> method isn't called until that callback has finished?</p>
  
  <p>Just calling <code>$(whatever)</code> from my callback function is not an option, because I actually have many of those <code>$()</code> distributed across the different pages of the application.</p>