How to execute function on dynamically loaded javascript immediately after loading?

Question

I am confused by the answer to this question: Execution of dynamically loaded JS files

I have some html:

<html>
    <head>
        <script type="text/javascript" src="/scripts/onload.js"></script>
    </head>
    <body onload="loadscript()">
    </body>
</html>

loadscript() inserts another script into the head. How do I immediately call a function from the inserted script ? (without using jQuery)

EDIT: The script to be inserted is determined at run time depending on the path of the current page.

joews · Accepted Answer · 2014-09-09T08:43:46.640

You can't immediately run code in your new script because the browser has to fetch it over the network first. That takes time, so it's an asynchronous action - the code that inserted the script tag will continue to execute whilst the script is fetched in the background.

Once the new script file has arrived the JavaScript engine will parse and execute it as soon as possible. If some other JavaScript code is already executing (an event handler, for example), it will wait for that code to finish before executing your new script. This article is a great explanation of the JavaScript asynchronous execution model.

You can't control exactly when your new script is executed, but you can call a function from the top level of your new script to have it executed as soon as possible:

function myFunction() {
  // code to execute when the second script is included
}

myFunction();

If you don't need to refer to this function anywhere else you can save some characters my using an IIFE:

!function() {
  // code to execute when the second script is included
}()

(or (function() { /* ... */ }()), or any of the other variants on IIFE syntax).

How to execute function on dynamically loaded javascript immediately after loading?

1 Answers1