At the bottom of the body tag inside my html document I have 2 script tags with type="module". Below that I have a script tag with some embedded code that depends on the result of the previous 2 scripts.
Is there a way to make sure that this code only gets executed once the first 2 scripts have finished?

<script src="./src/js/script1.js" type="module"></script>
<script src="./src/js/script2.js" type="module"></script>
<script type="text/javascript">
  // Code inside this tag should only run after the 2 previous script tags have been executed
  console.log('Hello SO');
</script>

At the bottom of the body tag inside my html document I have 2 script tags with type="module". Below that I have a script tag with some embedded code that depends on the result of the previous 2 scripts.
Is there a way to make sure that this code only gets executed once the first 2 scripts have finished?

<script src="./src/js/script1.js" type="module"></script>
<script src="./src/js/script2.js" type="module"></script>
<script type="text/javascript">
  // Code inside this tag should only run after the 2 previous script tags have been executed
  console.log('Hello SO');
</script>

• javascript
• html
• es6-modules

Share Improve this question Follow asked Jan 6, 2023 at 1:59 HendrikHendrik 64211 gold badge88 silver badges1818 bronze badges 2

• what do you mean by results? are the scripts running async code? – evolutionxbox Commented Jan 6, 2023 at 2:02
• "I have a script tag with some embedded code that depends on the result of the previous 2 scripts" - that's what module dependencies are made for! Use import declarations – Bergi Commented Jan 6, 2023 at 8:27

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

<script> tags with type="module" are automatically given a defer attribute (see load and execute order of scripts), so to make the third tag run after, it also needs to be deferred. Since this isn't possible with inline scripts (as mentioned in the ments), you can either move the script to another file and reference it with the src attribute or wrap the code in a event listener for the DOMContentLoaded event (see https://stackoverflow./a/41395202/19461620)

Using an external script file:

<script type="text/javascript" src="./script.js" defer></script>

script.js

  // Code inside this tag should only run after the 2 previous script tags have been executed
  console.log('Hello SO');

Using a DOMContentLoaded callback:

<script type="text/javascript" >
    window.addEventListener('DOMContentLoaded', function() {
        (function($) {
            //do something with b-lazy plugin, lightbox plugin and then with flexslider
        })(jQuery);
    });
</script>

Make your inline script a module one and import the required resources from there:

<script type="module">
  import result1 from "./src/js/script1.js";
  import result2 from "./src/js/script2.js";
  console.log('Hello SO');
</script>

Live example Source

You can make use of the onload callback of scripts to make sure the order is maintained.

let scriptsLoaded = 0;

//script1
var script1 = document.createElement('script');
script.type = 'module';
script.src ='./src/js/script1.js';
document.head.appendChild(script);

//script2
var script2 = document.createElement('script');
script.type = 'module';
script.src ='./src/js/script2.js';
document.head.appendChild(script);

script1.onLoad = function () {
    scriptsLoaded++;
    if(scriptsLoaded == 2) //load third script
}

script2.onLoad = function () {
    scriptsLoaded++;
    if(scriptsLoaded == 2) //load third script
}