How do I force JavaScript to load in sequential order?

Question

I'm struggling with loading JS files in sequential order, despite having looked at various other SO posts and documentation on async and defer. My code structure is as follows:

<script src="lang.js"></script> <!--dynamically loads either eng.js or fra.js-->

<script src="task1.js"></script> <!--all of the task*.js depend on eng.js/fra.js-->
<script src="task2.js"></script>
<script src="task3.js"></script>
<script src="task4.js"></script>

<script>
   // inline JS; depends on all task*.js
</script>

The contents of lang.js are as follows:

let langScript = document.createElement("script")
// FR is a boolean defined earlier
langScript.setAttribute("src", FR ? "fra.js" : "eng.js"); 
langScript.setAttribute("async", "false");

let head = document.head;
head.insertBefore(langScript, head.firstElementChild);

By my understanding, these scripts should load and execute in the order eng.js/fra.js -> task*.js -> inline, but this doesn't seem to be the case (at least in Chrome and Firefox). How should I modify my code such that it executes in the correct order? (I would prefer not to use callbacks if possible as I don't want to change the individual JS files too much.)

This seems relevant: Dynamically inserted script tag is not executed in the correct order — Felix Kling
– Felix Kling, Commented Jun 10, 2021 at 11:02
Appending scripts is ASYNCHRONOUS and there is not much you can do with it. You would be better off trying to do this in a different manner. We could give you better help if we knew what your code was actually doing. — epascarello
– epascarello, Commented Jun 10, 2021 at 12:03

msbit · Accepted Answer · 2021-06-10 12:32:31Z

Without using `import()`

You could do something like the following:

Remove the <script> elements for each of the task*.js files from the document
Add an event listener for the load event of the inserted language script
Create each of the task*.js scripts inside that event listener
Add event listeners for the load event of each task*.js and use them to resolve a Promise, which is combined to form a global Promise
Wait on that global Promise in the inline script.

Doing that, the relevant parts of lang.js would become:

const langScript = document.createElement('script');
langScript.setAttribute('src', FR ? 'fra.js' : 'eng.js');

const fullyLoaded = new Promise(resolve => {
  langScript.addEventListener('load', () => {
    const taskPromises = [];
    for (let i = 1; i < 5; i++) {
      const script = document.createElement('script');
      script.setAttribute('src', `task${i}.js`);
      taskPromises.push(new Promise(resolve => {
        script.addEventListener('load', resolve);
      }));
      head.insertBefore(script, head.firstElementChild);
    }
    resolve(Promise.all(taskPromises));
  });
});

const head = document.head;
head.insertBefore(langScript, head.firstElementChild);

and the document would look something like:

<html>
  <head>
    <script src="lang.js"></script>
    <script>
      window.addEventListener('load', async () => {
        await fullyLoaded;

        console.log('start of inline');
      });
    </script>
  </head>
</html>

None of the other scripts would need to be modified.

With this scheme:

lang.js is loaded first
eng.js/fra.js is completely loaded second
task1.js through task4.js are completely loaded in any order
inline scripts are run last

You will need to look at whether this manual deferral causes the loading to take to long; mocking this up locally has all the scripts loaded anywhere from 150ms to 450ms.

Using `import()`

Effectively the same as the above, but using the import() function-like keyword, lang.js becomes:

const src = FR ? './fra.js' : './eng.js';

const fullyLoaded = import(src).then(() => Promise.all([
  import('./task1.js'),
  import('./task2.js'),
  import('./task3.js'),
  import('./task4.js')
]));

There are some differences in how JavaScript code is run inside something that is imported like this. The big ones are the imposition of strict mode, and the isolation of context, so you will most likely need to store any global variables explicitly onto the window variable, if you aren't already, for the eng.js, fra.js and task*.js files.

Collectives™ on Stack Overflow

How do I force JavaScript to load in sequential order?

1 Answer 1

Without using `import()`

Using `import()`

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Without using import()

Using import()

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Without using `import()`

Using `import()`