html - How can I control Javascript execution order?

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:

script1.js:

var myValue = 1;

script2.js:

var myValue = 2;

script3.js:

var myValue = 3;

And I have one page, mypage.html that basically looks like this:

<html>
<script>
   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 );
   }
</script>
<body onload="get_number()">
   <div onclick="get_number()">Click me!</div>
</body>
</html>

The main idea with this page is that you would query it like this: mypage.html?run=script1 which would tell the get_number() function to dynamically insert script1.js in to mypage.htm. Then, I call get_number() to display the value loaded from the script.

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.

What I'm finding is that in IE, the number displays correctly.

In Firefox, Chrome and Safari, I get an error that myValue is undefined. However, if I click the Click me 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 get_number() function to work correctly onload.

Now, I hacked up my file a little so that the get_number function looks like this:

 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 } );
 }

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.

So, I guess I'm wondering, is there a better way to acplish 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.

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:

script1.js:

var myValue = 1;

script2.js:

var myValue = 2;

script3.js:

var myValue = 3;

And I have one page, mypage.html that basically looks like this:

<html>
<script>
   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 );
   }
</script>
<body onload="get_number()">
   <div onclick="get_number()">Click me!</div>
</body>
</html>

What I'm finding is that in IE, the number displays correctly.

Now, I hacked up my file a little so that the get_number function looks like this:

 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 } );
 }

Share edited Mar 29, 2012 at 12:38 Konrad Dzwinel 37.9k12 gold badges102 silver badges106 bronze badges asked Apr 2, 2009 at 5:49 Daniel Jette 9431 gold badge9 silver badges24 bronze badges

infoq./articles/stratifiedjs – n611x007 Commented Jun 27, 2014 at 11:25

Add a ment |

2 Answers 2

Sorted by: Reset to default 6

This method of dynamically loading script files using DOM methods like head.appendChild is asynchronous, meaning that the page does not wait for it to load before running any further code. If you did not want this asynchronous behaviour, you could load them with regular elements in your HTML, or you could mess around with a 'synchronous' XMLHttpRequest to grab it and eval() to run it.

You probably don't want to do that, though, because being asynchronous makes the entire page load faster, anyway. You will probably just need to add some logic that waits for the dynamically loaded script to have loaded before you go on with the next bit of code. This may, however, involve polling using setInterval() until you notice a variable from the included script has been defined. Or, you could add code in the included script that calls a method to whatever has been waiting for it.

Or, you could look at how jQuery does something similar, look for where the ajax method is defined, specifically these parts...

var script = document.createElement("script");

// then later ...

script.onload = script.onreadystatechange = function(){
    if ( !done && (!this.readyState ||
    this.readyState == "loaded" || this.readyState == "plete") ) {

        // do processing
            head.removeChild( script );
    }
};

// ...

head.appendChild(script);

Could you possibly add a function call to your script files, so that when they're run, they call the function that does your

document.write( myValue );

So that script1.js would be

var myValue = 1;
scriptLoaded();

and your main file would have:

function scriptLoaded(){
   document.write( myValue );
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - How can I control Javascript execution order? - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)