1. Technology

Synchronising Scripts


When it comes to loading external files into a web page most browsers are capable of processing several files at the same time provided that none of them are JavaScript. With JavaScript files browsers will only load the one JavaScript file and all other files will wait until after that file has loaded.

There are several reasons why browsers work this way but one of the reasons that may not be obvious to you at first is related to synchronisation.

Consider the situation where you request for two JavaScript files to be downloaded as a part of your page and one of these files contains code that calls functions contained in the other file. With the files downloading one at a time you simply ensure that the file containing the function is requested first so that it has loaded into the page before the second JavaScript that contains code that calls the function has downloaded and then when the function is called it is readily available to be run. Reverse the order of the scripts and you end up with the code calling a function that doesn't exist yet. So you can handle the synchronisation in this instance simply by making sure that the files are referenced in the right order in the HTML so that they get processed in the right order.

Internet Explorer does provide an additional option with regard to scripts where you know that they will not be required until the entire page has loaded. For that browser you can specify a defer attribute in the script tag to identify scripts that don't need to be downloaded before the following scripts so as to allow Internet Explorer to choose when to download those scripts so as to load the page more efficiently.

Once you introduce the possibility of two scripts being able to download at the same time you introduce synchronisation issues that cannot be solved by making sure that the HTML is coded in the right way. This situation can arise in any web browser where you use JavaScript to request the loading of additional scripts rather than requesting all the scripts directly from the page. When you use JavaScript to add JavaScript to your page you can have multiple scripts being downloaded at the same time independently of both the web page and each other.

The simplest way of handling the download of multiple scripts simultaneously is where the script content of each are completely independent of one another. If the code in each script never tries to call code contained in the other script then it doesn't matter which script finishes loading and actually gets to run first.

Where the two scripts are interdependent then we need to change the JavaScript to test for the dependency as we cannot control things from the HTML in this instance. So what we need where script B calls code inside script A is some way of telling whether script A has finished loading or not before we allow the code that calls it from script B to run.

This is most easily done if we create a field at the end of script A. For example:

var scriptAloaded = true;

Now we can add processing in script B to test if that field is defined before trying to call anything in script A. Since script B may load before script A we will need to add processing into script B that waits a short while and then tests for that field again so that the script can still run in that situation. We might want to repeat that a few times to allow for a slightly longer delay in script A loading but we'd also need to place a limit on the number of times we perform the test in order to allow for the possibility that there may be an issue with script A so that it doesn't load at all.

For example we might wrap the code in script B that is dependent on code in script A in a few extra lines of JavaScript like this.

var scriptAtest = 0;
function testA() {scriptAtest++;
if (scriptAloaded) {

// code dependent on script A goes here

} else if (scriptAtest < 10) setTimeout(testA,100);
} testA();

With this code in place the code dependent on the other script having loaded can now only run once it is confirmed that the other script actually has loaded. With this particular code the test will be performed up to ten times at 1/10th second intervals so that the script can run within 1/10th of a second of the other script loading provided that it actually finishes loading within one second of this code starting. For your particular situation you may want to change the time between each test to be more or less than the 100 milliseconds in the above code and may want to allow for more or less than the 10 attempts that the above code allows for. To do that simply change one or both of the numbers in the second last line.

  1. About.com
  2. Technology
  3. JavaScript
  4. Javascript Tutorials
  5. Coding Tips
  6. Synchronising Scripts

©2014 About.com. All rights reserved.