Load and execute javascript code SYNCHRONOUSLY

Question

Is there a way to load and execute a javascript file in a synchronous way just like a synchronous XMLHttpRequest?

I'm currently using a sync XMLHttpRequest and then eval for this, but debugging that code is very difficult...

Thanks for your help!

Update

I tried this now:

test.html

<html>
    <head>
        <script type="text/javascript">
            var s = document.createElement("script");
            s.setAttribute("src","script.js");
            document.head.appendChild(s);
            console.log("done");
        </script>
    </head>
    <body>
    </body>
</html>

script.js

console.log("Hi");

Output: done Hi

So it was not executed synchronously. Any idea to make "Hi" appear first?

Update 2 Other example

test.html (code inside a script tag)

var s = document.createElement("script");
s.setAttribute("src","script.js");
document.head.appendChild(s);
SayHi();

script.js

function SayHi(){
    console.log("hi");
}

Output: Uncaught ReferenceError: SayHi is not defined

Not sure I understand - JavaScript *is* executed synchronously unless the `deferred` attribute is used in the `script` tag. Can you show an example of what you mean? — Pekka, May 20 '11 at 16:21
Sorry, not true. When you load a JS script dynamically through code, unlike when it's included in the markup (like the asker did) - by default it's always loaded asynchroniously. See rest of thread below. — Gilad Barner, Apr 19 '15 at 06:54
document.write() is the only way to synchronously insert script tag. — Kevin He, Apr 04 '19 at 00:36
Does this answer your question? [Dynamically loading JavaScript synchronously](https://stackoverflow.com/questions/2879509/dynamically-loading-javascript-synchronously) — Hirurg103, Feb 29 '20 at 17:19

score 29 · Answer 1 · edited Nov 20 '15 at 18:12

29

If you use this:

function loadScriptSync (src) {
    var s = document.createElement('script');
    s.src = src;
    s.type = "text/javascript";
    s.async = false;                                 // <-- this is important
    document.getElementsByTagName('head')[0].appendChild(s);
}

You can do what you want (although divided up in an additional script file)

test.html (code inside a script tag):

loadScriptSync("script.js");
loadScriptSync("sayhi.js"); // you have to put the invocation into another script file

script.js:

function SayHi() {
     console.log("hi");
}

sayhi.js:

SayHi();

edited Nov 20 '15 at 18:12

Adrian Günter

890
2
11
22

answered Feb 04 '14 at 10:48

heinob

18,637
3
39
59

still get error by using this: loadScriptSync("https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js"); $().jquery; – Shawn Nov 15 '16 at 03:11
Not sure what you are saying about separate scripts, but nowhere in the loadScriptSync function is anything blocking until the script is loaded. – Michael May 02 '17 at 02:20
Does s.async = false; actually do anything. When debugging, that does not set it to async=false on the object – Drenai Aug 01 '17 at 17:02
7

`loadScriptSync` doesn’t execute it inline. With `s.async = false`, scipts are just loaded *in order*. so loading multiple scripts that way guarantees that they’re executed in order. – flying sheep Oct 20 '17 at 06:41
this is loading ASYC only.. Not synchronous – mythicalcoder Jan 21 '19 at 17:45

bjornd · Answer 2 · 2011-05-20T17:02:11.400

23

All scripts which are loaded after DOM is ready are loaded asynchronously. The only reason for browser to load them synchronously is function write which can output something. So you can use onload callback of the script element to achieve what you want.

var s = document.createElement("script");
s.setAttribute("src","script.js");
s.onload = function(){
    console.log('Done');
}
document.head.appendChild(s);

Another way is to load js-file via XHR and set code inside the script element:

window.onload = function(){
    var req = new XMLHttpRequest();
    req.open('GET', "test.js", false);
    req.onreadystatechange = function(){
        if (req.readyState == 4) {
            var s = document.createElement("script");
            s.appendChild(document.createTextNode(req.responseText));
            document.head.appendChild(s);
        }
    };
    req.send(null);
}

edited May 20 '11 at 17:02

answered May 20 '11 at 16:38

bjornd

21,619
4
53
70

9

this is not synchronous ;) – Van Coding May 20 '11 at 16:44
1

Yeah, but there is no another solution as far as I can judge. Moreover your question was: "Any idea to make "Hi" appear first?", not "How to do that synchronously?". – bjornd May 20 '11 at 16:45
2

Then I have to use eval? It was ment to be synchronous as it is in the title of the question. – Van Coding May 20 '11 at 16:47
What the reason for using eval? – bjornd May 20 '11 at 16:48
1

Then I can make it synchronous. I can use a synchronous XMLHttpRequest to load the code and then use eval to execute it. It seems to be the only way... – Van Coding May 20 '11 at 16:49
Indeed!!! This works! But then I have the same as eval()... I don't get the exact line numbers for errors... – Van Coding May 20 '11 at 16:55
@FlashFan: Maybe you should explain (in your question) the whole story behind it. Maybe you're trying to solve something in the completely wrong way. Maybe we can help by suggesting better ways of doing it. Synchronous XHRs will be more of a problem than solution and we wouldn't recommend them. – Robert Koritnik May 20 '11 at 16:59

score 14 · Answer 3 · edited May 23 '17 at 12:10

From a similar question ( https://stackoverflow.com/a/3292763/235179 ):

<script type="text/javascript">
  document.write('<script type="text/javascript" src="other.js"><\/script>');
</script>

<script type="text/javascript">
  functionFromOther();
</script>

Either the code called from the document.write'd script needs to be in it's own <script> or it needs to be in the window.onload() event.

Robert Koritnik · Answer 4 · 2011-05-20T17:01:48.270

Your scripts do execute synchronously

your code if put together is:

1. create script element
2. set its attribute src
3. set its attribute deferred
4. display done...

this first part stops execution and hands it over to next script

5. script executes and displays Hi

Everything is very much synchronous... In Javascript some code is executed completely until it executes to the last line or hands execution over to internal systems (like XHR or timer).

When one would like to put prepare some parts to execute later on, they prepare it with setTimeout. Even if timeout is shorter than the rest of the code will take that's the time it will execute. After code has finished executing. Example:

// some code
setTimeout(function(){ alert("I'm second alert"); }, 1);
longExecutionTask();
alert("I'm the first alert");

In the above code even if setTimeout is set to execute after 1ms it won't start until the code after it finishes execution which ends with displaying an alert box. The same happens in your case. The first batch of code has to finish executing before anything else can start.

Why you're getting exception (in example 2)

You've added some more code after I've written my answer so here goes some more info.

Adding a script tag will not immediately execute it. Script loading+execution will happen when HTML parser will get to the SCRIPT element you added. It will load it at that point and evaluate/execute its content.

HTML parser starts parsing your document
HEAD is being parsed and its SCRIPT child tag gets parsed and executed. This execution adds one more element to BODY tag that hasn't been parsed yet.
Parser moves on to BODY and parses its content (the newly added SCRIPT tag) which then loads the script and executes its content.

SCRIPT elements get immediately executed only when you they're added after your page has been parsed and is already rendered in browser. In your case that is not the case. The first script executes immediately and the dynamically added one executes when parses gets to it.

No... The console displays "done" first and later "Hi" so it was not executed when the script tag was added ;) That is my problem. I want to be able to access code inside the tag, for example a function, direclty after adding the tag- — Van Coding, May 20 '11 at 16:37
@FlashFan: Check my additional information about javascript code execution process. It should make things clear for you. — Robert Koritnik, May 20 '11 at 16:39
@Robert: But then it is not synchonous, and that is not the question. I'm asking for a way to execute the code immediately & without using eval. Is it possible? — Van Coding, May 20 '11 at 16:42
@FlashFan: Synchronous execution in my dictionary means procedural/serial execution when you know exactly when something is going to execute. Asynchronous on the other hand depends on external factors when you cant say for sure when something will execute and in what order. So your code is very much sync. — Robert Koritnik, May 20 '11 at 16:47
Ok, then I ask it different for you: Is it possible to load & execute script before continuing & without using eval? — Van Coding, May 20 '11 at 16:51
FlashFan: Yes it is. Don't use immediate script execution. And use `load` events on your scripts that you wish to first execute (check @bjornd's example). jQuery DOM ready event will be helpful. But based o your understanding I suppose this will be a very hard nut to crack for you. You have to understand browsers and their execution cycle quite a bit. — Robert Koritnik, May 20 '11 at 16:56

User0123456789 · Answer 5 · 2019-08-12T16:39:16.107

You can synchronize asynchronous operations among themself. Create recursive function to represent a loop and call the next operation when previous finish. The following function imports scripts in order with the similar technique. It waits a script to be loaded and if there is no error continues with the next. If an error occur it calls the callback function with the error event and if there is no error - calls the same callback function with null after all scripts are loaded. It also cleans after itself with s.parentNode.removeChild(s).

function importScripts(scripts, callback) {
    if (scripts.length === 0) {
        if (callback !== undefined) {
            callback(null);
        }
        return;
    }
    var i = 0, s, r, e, l;
    e = function(event) {
        s.parentNode.removeChild(s);
        if (callback !== undefined) {
            callback(event);
        }
    };
    l = function() {
        s.parentNode.removeChild(s);
        i++;
        if (i < scripts.length) {
            r();
            return;
        }
        if (callback !== undefined) {
            callback(null);
        }
    };
    r = function() {
        s = document.createElement("script");
        s.src = scripts[i];
        s.onerror = e;
        s.onload = l;
        document.head.appendChild(s);
    };
    r();
}

score 1 · Answer 6 · answered Sep 21 '20 at 19:43

1

You can use the "defer" attribute when including the js file.

<script defer="defer" src="contact/js/frontend/form.js"></script>

answered Sep 21 '20 at 19:43

user1077915

772
1
10
21

Load and execute javascript code SYNCHRONOUSLY

6 Answers6

Your scripts do execute synchronously

Why you're getting exception (in example 2)

Linked