title: How can I control Javascript execution order?
body: <p>I'm having some concurrency issues with a webpage I'm building. Basically, I have three script files that I'm using to hold some data:</p>
  
  <p><strong>script1.js:</strong></p>
  
  <pre><code>var myValue = 1;
  </code></pre>
  
  <p><strong>script2.js:</strong></p>
  
  <pre><code>var myValue = 2;
  </code></pre>
  
  <p><strong>script3.js:</strong></p>
  
  <pre><code>var myValue = 3;
  </code></pre>
  
  <p>And I have one page, <strong>mypage.html</strong> that basically looks like this:</p>
  
  <pre><code>&lt;html&gt;
  &lt;script&gt;
     function get_number()
     {
       var script_file = GetQueryStringValue( "run" );
       e = document.createElement('script');
       e.type='text/javascript';
       e.src = script_file + ".js"
       head.appendChild( e );
  
       document.write( myValue );
     }
  &lt;/script&gt;
  &lt;body onload="get_number()"&gt;
     &lt;div onclick="get_number()"&gt;Click me!&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The main idea with this page is that you would query it like this:
      <code>mypage.html?run=script1</code>
  which would tell the <code>get_number()</code> function to dynamically insert <code>script1.js</code> in to mypage.htm. Then, I call <code>get_number()</code> to display the value loaded from the script.</p>
  
  <p>Now, I've stripped down the above to what I think are the relevant parts and I've left out a bunch of stuff, obviously. My actual code loads a large array of values and is more interesting... But, I'm hoping someone can help me out with this regardless.</p>
  
  <p>What I'm finding is that in IE, the number displays correctly.</p>
  
  <p>In Firefox, Chrome and Safari, I get an error that <code>myValue</code> is undefined. However, if I click the <code>Click me</code> div that I created, the number displays correctly. So, I know I'm correctly loading the javascript external file. But, it just isn't loaded in time for my <code>get_number()</code> function to work correctly <code>onload</code>.</p>
  
  <p>Now, I hacked up my file a little so that the <code>get_number</code> function looks like this:</p>
  
  <pre><code> function get_number()
   {
     var script_file = GetQueryStringValue( "run" );
     e = document.createElement('script');
     e.type='text/javascript';
     e.src = script_file + ".js"
     head.appendChild( e );
  
     setTimeout( function() { document.write( myValue ), 10 } );
   }
  </code></pre>
  
  <p>The setTimeout delays enough for the DOM to be updated and the javascript to be loaded in most cases. But, this is a total hack. Firefox tends to load this 'improved' code correctly all the time while Chrome and Safari manage to get the value about 50% of the time.</p>
  
  <p>So, I guess I'm wondering, is there a better way to accomplish what I'm trying to do here? It's very important that the value be driven externally (by the query string), but other than that requirement, I'm very flexible.</p>