JavaScript loading order causing issues
<p>I have one JS file in the header (this is for Google DFP) and another before the <code>&lt;/body&gt;</code></p>

<p>I have found if the header JS file doesn't load before the bottom one I get this error in Chrome Console: </p>

<pre><code> Uncaught TypeError: Object #&lt;Object&gt; has no method 'defineSlot' 
</code></pre>

<p>The defineSlot is defined in the first script. This issue only occurs on around every 10 page refresh so most of the time its ok.</p>

<p>I want advise on how to deal with this issue. Below are the 2 scripts:</p>

<p>Header Script:</p>

<pre><code>&lt;script type='text/javascript'&gt;
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
(function() {
    var gads = document.createElement('script');
    gads.async = true;
    gads.type = 'text/javascript';
    var useSSL = 'https:' == document.location.protocol;
    gads.src = (useSSL ? 'https:' : 'http:') + 
    '//www.googletagservices.com/tag/js/gpt.js';
    var node = document.getElementsByTagName('script')[0];
    node.parentNode.insertBefore(gads, node);
})();
&lt;/script&gt;

&lt;script type='text/javascript'&gt;
googletag.cmd.push(function() {
    googletag.pubads().enableAsyncRendering();
    slot1 = googletag.defineSlot('/21848415/GoneGlobal_Square', [250, 250], 'doubleClickSquareIndex-250-250').addService(googletag.pubads());
    slot2 = googletag.defineSlot('/21848415/GoneGlobal_Skyscraper', [160, 600], 'doubleClickSkyscraperIndex-160-600').addService(googletag.pubads());
    slot3 = googletag.defineSlot('/21848415/GoneGlobal_Leaderboard', [728, 90], 'doubleClickLeaderboardIndex-728-90').addService(googletag.pubads());
    slot4 = googletag.defineSlot('/21848415/GoneGlobal_Leaderboard', [728, 90], 'doubleClickLeaderboardHeaderInternal-728-90').addService(googletag.pubads());
    slot5 = googletag.defineSlot('/21848415/GoneGlobal_SmallSquare', [200, 200], 'doubleClickSmallSquareHeaderExternal-200-200').addService(googletag.pubads());
    googletag.enableServices();
});
&lt;/script&gt;
</code></pre>

<p>Below is the second script - this is only part of it (its quite long):</p>

<pre><code>$(function() {
    ///////////////////////// Double Click AD Variables
    var slot1 = googletag.defineSlot('/21848415/GoneGlobal_Square', [250, 250], 'doubleClickSquareIndex-250-250');
    var slot2 = googletag.defineSlot('/21848415/GoneGlobal_Skyscraper', [160, 600], 'doubleClickSkyscraperIndex-160-600');
    var slot3 = googletag.defineSlot('/21848415/GoneGlobal_Leaderboard', [728, 90], 'doubleClickLeaderboardIndex-728-90');
    var slot4 = googletag.defineSlot('/21848415/GoneGlobal_Leaderboard', [728, 90], 'doubleClickLeaderboardHeaderInternal-728-90');
    var slot5 = googletag.defineSlot('/21848415/GoneGlobal_SmallSquare', [200, 200], 'doubleClickSmallSquareHeaderExternal-200-200');
)};
</code></pre>

<p>Is there a way to stop a script running another another method/function is loaded?</p>

<p>Can I create some sort of dependency?</p>

<p>How can I ensure the top JS is loaded before the bottom?</p>
