script loaded asynchronously using appendChild gets loaded last

Question

I created a script that add javascript files by appending it to the head tag.

Using the code below that I created:

var Dim = (function(s){ 
    var storage; 
    function loadError (oError) {
        throw new URIError("The script " + oError.target.src + " is not accessible.");
    }
    return {
        require : function(script,callback){
            var oScript = document.createElement("script");
            oScript.type = "text\/javascript";
            oScript.onerror = loadError;
            if (callback) { 
                oScript.onload = callback; 
            }
            document.head.appendChild(oScript);
            oScript.src = script;
        }
    };
})();

When we use the script like this:

Dim.require("script.js", function(){alert(token)}); alert(token);

and script.js code is:

alert(" Ok"); var token = " Hello";

The alert(token) throws an error.

Can anyone point me the Problem?

[Question was edited]

[Works for me](http://plnkr.co/edit/Qjn17RQ0ye4OmXcZeTDo?p=preview). — T.J. Crowder, Mar 28 '18 at 08:46
@MMJM: The link above, which is just your code wrapped in a plnkr, 1. doesn't show that error, and 2. does show an alert with the contents of `token` (`"Hello"`). — T.J. Crowder, Mar 28 '18 at 08:50
@AlpeshJikadra: *"The problem is the script is loaded, but I cannot use its content."* — T.J. Crowder, Mar 28 '18 at 08:52
MMJM - You've said *"...the script is loaded, but..."*: How do you know the script is loaded? Do you see the `Ok` alert? — T.J. Crowder, Mar 28 '18 at 08:53
@T.J. Crowder : But when I try to alert token outside of the "Dim.require()", it shows this error. — MMJM, Mar 28 '18 at 08:54
@MMJM — Define "outside". The script.js file that alerts it is *outside*, but as TJ's demo shows, it alerts fine. You need to provide a [mcve]. — Quentin, Mar 28 '18 at 08:55
You are getting the error because, you are loading the script asynchronously. — Durga, Mar 28 '18 at 09:01
I edited it again, but with two alerts. But I only receives one alert instead of two. — MMJM, Mar 28 '18 at 09:01
Duplicate: https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call — Quentin, Mar 28 '18 at 09:19

score 1 · Accepted Answer · answered Mar 28 '18 at 09:05

1

Dim.require("script.js", function(){alert(token)}); alert(token);

It runs first alert because its in callback which is called when the script is loaded by the browser.

if (callback) { 
  oScript.onload = callback; 
}

And second is not giving you an alert because it gives you an error

Uncaught ReferenceError: token is not defined

You are loading your script.js asynchronously and while executing second alert , the script.js not loaded yet.

answered Mar 28 '18 at 09:05

Durga

13,489
2
19
40

Thanks. I dont know much about asynchronous scripts – MMJM Mar 28 '18 at 09:19
@MMJM check the [doc](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement) – Durga Mar 28 '18 at 09:23

script loaded asynchronously using appendChild gets loaded last

1 Answers1