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
– user3754674, Commented Sep 5, 2014 at 1:41
script open tag is <script> and closing tag is </script> — Igor
– Igor, Commented Sep 5, 2014 at 1:44
"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? — user400654
– user400654, Commented Sep 5, 2014 at 1:47
Why are you calling your second approach asynchronous? It's also synchronous. A better description is using DOM manipulation — Ruan Mendes
– Ruan Mendes, Commented Sep 5, 2014 at 1:51

Ruan Mendes · Accepted Answer · 2014-09-05 02:16:12Z

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 5, 2014 at 2:16

answered Sep 5, 2014 at 1:49

Ruan Mendes

92.7k31 gold badges161 silver badges225 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

user3754674 Over a year ago

what does it mean can you explain in detail ?

user3754674 Over a year ago

do you mean adding document.write("<script>"); before calling script2.js?

user400654 Over a year ago

No, another script tag. </script><script> do stuff here!

user3754674 Over a year ago

still value2 is undefined

user3754674 Over a year ago

@KevinB i added this document.write("<scr" + "ipt></scr" + "ipt>"); after calling sciptt2.js and still not working

|

Colorfully Monochrome · Accepted Answer · 2014-09-05 01:51:18Z

-1

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>

answered Sep 5, 2014 at 1:51

Colorfully Monochrome

1,13410 silver badges20 bronze badges

1 Comment

Colorfully Monochrome Over a year ago

Why the downvotes? That was my understanding of how HTML parsers work.

Community · Accepted Answer · 2017-05-23 12:21:40Z

-1

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?

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Sep 5, 2014 at 1:54

Nick Grealy

26.2k9 gold badges112 silver badges127 bronze badges

1 Comment

user3754674 Over a year ago

i want to do it inline using document.write

Collectives™ on Stack Overflow

Problems in synchronous javascript

3 Answers 3

8 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related