Problems in synchronous javascript

Question

i am learning javascript and want to use synchronous javascript call in my code.

For example i have two scripts, script1.js and script2.js. Here is script1.js:

<script>

var value1="Script 1";
alert(value1);

//calling script2
url="script2.js"
document.write("<scr" + "ipt src=\"" + url + "\"></scr" + "ipt>");

</script>

Here is script2.js

  <script>       
    var value2="Script 2";       
    </script>

Now my question is can i print value from script2 like if i add this( alert(value2);) in my script1.js.

<script>

var value1="Script 1";
alert(value1);

//calling script2
url="script2.js"
document.write("<scr" + "ipt src=\"" + url + "\"></scr" + "ipt>");
alert(value2);
</script>

I have done this using asychronous js as

 var scr = document.createElement('script');
 scr.setAttribute('src', url);
 var head = document.getElementsByTagName("head")[0];
 head.appendChild(scr);

It is working but i want to achieve this synchronously any suggestions??

Thanks in advance

someone gave me -1? why i am learning javascript may be it is a very simple question for many but i am confused in this one i just need explanation — user3754674, Sep 05 '14 at 01:41
*"Now my question is can i print value from script2 like if i add this( alert(value2);) in my script1.js."* did you try running the code? what was the outcome? — Kevin B, Sep 05 '14 at 01:47
Why are you calling your second approach asynchronous? It's also synchronous. A better description is using DOM manipulation — Ruan Mendes, Sep 05 '14 at 01:51
If you're looking to import lots of scripts you can look into a script loading framework like the following http://code.tutsplus.com/articles/for-your-script-loading-needs--net-19570 — Jason, Sep 05 '14 at 01:51
What is the purpose of this task? What are you trying to do? why are you doing it? it seems rather pointless. — Kevin B, Sep 05 '14 at 02:02
2/3 of the answers are avoiding the question entirely and answering something else instead, so they're rightfully downvoted. — Kevin B, Sep 05 '14 at 02:03
i am writing some code and its the requorement to use inline or appendhead* . Appendhead is working while adding inline using document.write is having a problem and this is just a test case of what i am doing — user3754674, Sep 05 '14 at 02:04
@user3754674 Are you sure you tried what I suggested? Read my answer carefully and try again, it works on my machine — Ruan Mendes, Sep 05 '14 at 02:23

Ruan Mendes · Answer 1 · 2014-09-05T02:16:12.707

0

When adding a script like you did in the first case, you can only use values from inside script2.js after you open a new script tag.

index.html

<script>
var value1="Script 1";
alert(value1);

//calling script2
url="script2.js"
document.write("<scr" + "ipt src='script2.js'></scr" + "ipt>");
</script>
<script>
alert(value2);
</script>

script2.js

var value2='yes';

Tested locally and verified that it does work (I see an alert with 'yes'), and what you have (all in the same script tag) does not work (throws an exception because value2 is undefined).

edited Sep 05 '14 at 02:16

answered Sep 05 '14 at 01:49

Ruan Mendes

90,375
31
153
217

what does it mean can you explain in detail ? – user3754674 Sep 05 '14 at 01:51
do you mean adding document.write(" – user3754674 Sep 05 '14 at 01:54
No, another script tag. ` – Kevin B Sep 05 '14 at 01:56
still value2 is undefined – user3754674 Sep 05 '14 at 01:59
@KevinB i added this document.write(""); after calling sciptt2.js and still not working – user3754674 Sep 05 '14 at 02:00
that's not at all what i suggested. i was clarifying @JuanMendes's suggestion, which he just made clearer with an example. – Kevin B Sep 05 '14 at 02:01
@user3754674 I just tested this on my local machine (in IE10 and Chrome) and the findings are exactly as I expected, the code you have fails because value2 is not defined and, what I posted does correctly alert the value of value2, you must not be doing what I suggested. Downvoters, you should explain why you downvoted – Ruan Mendes Sep 05 '14 at 02:13
thanks but this is not my solution as i am not using script1.js in the index html but all script files are external – user3754674 Sep 05 '14 at 06:42

score -1 · Answer 2 · answered Sep 05 '14 at 01:51

In javascript, the order of the scripts is always synchronous. Because you added script 2 after initialization, you created a DOM that looks like this.

<html>
   <head>
      <script>
        //script 1
      </script>
   </head>
   <body> 
      ---Body content here
   </body>
</html>
<script src="script2.js"/>

Note how you put the script at the end of the page. Because the HTML is read synchronously, script1 will finish executing (including the alert() which will have value2 be undefined because script2 hasn't been parsed yet), then the HTML body will be processed, then script2.js.

If you wish to load a secondary script synchronously in the middle of your current script, you will have to do an XMLHTTPRequest and get the content, then run eval(script_2_content). Eval will in place compile and parse the second script, synchronously.

What you would then be doing is:

<html>
   <head>
      <script>
        //script 1 before loading script 2
        //script 2 content
        //script 1 content after loading script 2
      </script>
   </head>
   <body> 
      ---Body content here
   </body>
</html>

Why the downvotes? That was my understanding of how HTML parsers work. — Colorfully Monochrome, Sep 05 '14 at 03:52

score -1 · Answer 3 · edited May 23 '17 at 12:21

Sounds like you want an asynchronous function, with a callback. (The first answer, shows your example exactly!).

Basically, when the function has finished loading your script, it will call the callback function, where you should be able to run your alert(value2); script.

Otherwise, if you want to use document.write, you have these options:

(I think the problem is, the <script></script> tags in your *.js files, they're not required!)

src1.js

document.write('<script src="src2.js"></script'+'>');
document.write('<script>alert(value2);</script'+'>');

src2.js

var value2 = 'foobar!'

HTML

<html>
<body>
<script src="src1.js"></script>
</body>
</html>

Does this meet your requirements?

i want to do it inline using document.write – user3754674 Sep 05 '14 at 01:55 — user3754674, Sep 05 '14 at 01:55

Problems in synchronous javascript

3 Answers3