ansaurus

Question

How can I control Javascript execution order?

Answer 1

+3 A:

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 == "complete") ) {

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

// ...

head.appendChild(script);

thomasrutter 2009-04-02 06:03:29

Answer 2

A:

Have everything in the same script. then use a function pointer:

Your script file:

function myFunction1()
{
  return 1;
}

function myFunction2()
{
  return 2;
}

function myFunction3()
{
  return 3;
}

And to choose function (main file)

var myFunction;
switch (GetQueryStringValue("function"))
{
  case "1":
    myFunction = myFunction1;
    break;
  case "2":
    myFunction = myFunction2;
    break;
  case "3":
    myFunction = myFunction3;
    break;
}

var value = myFunction();

I'm sure that you can use eval() or something instead of the switch statement.

jgauffin 2009-04-02 06:04:39

Answer 3

+2 A:

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

Mikko Tapionlinna 2009-04-02 06:08:18

This is the solution I went with because it proved to be so simple. I feel somewhat silly that I didn't think of this myself!Thanks for the other replies, though. They were all actually workable and would have solved me problem.

Daniel Jette 2009-04-02 17:08:12

ansaurus

tags:

views:

answers:

How can I control Javascript execution order?

related questions