1

I'm having a very frustrating problem with my javascript files. I have one global namespace that contains a page_data, utilities, modules etc namespace.

My directories look like this: /utilities/single_utility.js /modules/module.js etc tec

Anyways, I load the utilities before the modules, (which use the utilities) but keep getting problems.

My loader script looks like this (its wrapped in an SEAF):

    for (var index in file_list) {

    var url = file_list[index];
    var new_script = document.createElement('script');

    new_script.setAttribute("type", "text/javascript");
    new_script.setAttribute("src", url);

    element.appendChild(new_script);
}

Project is my global namespace, that holds all of these other namespaces. But when I try to reference a utility in one of my modules, with Project.utilities.session.exist() etc, it will sometimes throw an error that Project can't be found?

How can I fix this to make sure my files are loading properly or am I doing something else wrong?

3 Answers 3

3

Using async = false should protect your load order.

This is a quick snippet I use to load and maintain order.

var loadScript = function( url ) {
    if (url) {
        var doc = document,
        t = doc.createElement("script"),
        s = doc.getElementsByTagName("script")[0];
        t.type = "text/javascript";
        // Keep script order!
        t.async = false;
        t.src = url;
        s.parentNode.insertBefore(t, s);
    }
};

Some references backing this logic (and regarding browser support) from MDN and Microsoft

6
  • Hmmm, I tried this as well and things are still loading out of order. for (var index in file_list) { var url = file_list[index]; var new_script = document.createElement('script'); new_script.setAttribute("async", "false"); new_script.setAttribute("type", "text/javascript"); new_script.setAttribute("src", url);` element.appendChild(new_script); } Aug 18, 2012 at 3:41
  • Interesting... I will revise my statement. Typically I don't use setAttribute, but have found it to work. Aug 18, 2012 at 3:55
  • That works great! Its a very simple solution to a huge headache. All my js files are database driven to link modules/pages etc together so I'm going to create a python script to compile when I deploy, but this is a great solution for local development. Aug 18, 2012 at 4:06
  • It is worth stating that using a script loader abstracts complexity and will be more compatible. I agree with the other "answers" on principle. However they are cheap solutions, not actual answers (that teach anything) about the original question. Aug 18, 2012 at 4:07
  • 1
    I agree with the other solutions in principle as well, however I'm only about 6 months into programming and want to learn! This is all overkill for the site I'm building, but its the learning that counts Aug 18, 2012 at 4:18
0

When you add the script tag to the page, the browser has to go out and download those scripts. There's no guarantee that they will download and execute in the same order that you created them.

You will need to add an event listener to new_script for when it loads, either onload or onreadystatechange, depending on the browser. But truly I'd recommend using a script loading library (such as RequireJS) that handles all the nasty details for you.

As an aside, why not just add all your script tags directly to your page? In that case they load sequentially.

1
  • I tried that before, but it wasn't working? I had all my resources such as jquery in the head, and then I had a script at the very bottom of my page that had the src for the files and still no go. Aug 18, 2012 at 3:20
0

It's better if you resolve this problem using a script loader.

As Matt said RequireJS is a good option if you also want to handle script dependencies.

For script loading only, you can take a look into LAB.js, is very small and straightforward:

for (var index in file_list) {
    $LAB.script(file_list[index]);
}

If the scripts have dependencies and must be loaded in order, you can use .wait(), to do that keep the chain object returned by script. You can re-write the loop to keep the chain:

var chain;
for (var index in file_list) {
    if (!chain) { 
         chain = $LAB.script(file_list[index]).wait(); 
    } else {
         chain.script(file_list[index]).wait();
    }
}

Or just forget the file_list array and use $LAB directly:

$LAB.script('file1.js').wait()
    .script('file2.js').wait()
    /* ... */

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.