Why Javascript codes cannot be executed when async or defer are set in script tag?

Question

I used JavaScript in script tag in html like this:

<script src="file.js" type="text/javascript"></script>

With use of above code, file.js is linked to our html page. But when we add async or defer to the script tag, file.js cannot be executed in these codes:

<script src="file.js" type="text/javascript" async="async"></script>
<script src="file.js" type="text/javascript" defer="defer"></script>

Could you help me, please? Why such problem I faced with it?

In addition, for more clarifying I add a section of html comprised of file.js loading as follow:

<!DOCTYPE html>
<html lang="en-US">
 <head>

 <title>Dr.Kayvanfar</title>
 <meta charset = "UTF-8" />
 <link type="text/css" rel="stylesheet" href="Main_CSS.css" />
   
 <noscript> Your browswer don't support JS</noscript>

 </head>



 <body>
   <div id="container" style="width:1500px;margin-left:auto;margin-right:auto;color:blue;">
     <div id="header" style="height:100px;background-color:rgb(0,0,0); margin-bottom:20px;margin-top:20px; color:rgb(255,255,255);padding-top:5%">
       <span class="topheader">Future Students</span>
       <span class="topheader">Current Students</span>
       <span class="topheader">Research & Teaching</span>
       <span class="topheader">Communities</span>
       **<script src="file.js" type="text/javascript" async ></script>**
     </div>

     </body>
   
   </html>

Dan Knights · Accepted Answer · 2020-07-18 08:46:12Z

1

It should be:

<script src="file.js" type="text/javascript" defer></script>
// Or
<script src="file.js" type="text/javascript" async></script>
// Or
<script src="file.js" type="text/javascript" async defer></script>

When to use which one:

If the script is modular and does not rely on any scripts then use async.
If script is relied on any other script then use defer.

Though you can use both:

If you specify both, async takes precedence on modern browsers, while older browsers that support defer but not async will fallback to defer.

Source

answered Jul 18, 2020 at 8:46

Dan Knights

8,4184 gold badges28 silver badges55 bronze badges

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

7 Comments

Dan Knights Over a year ago

Where is file.js located? Are you linking to it correctly?

Hamed Baziyad Over a year ago

It was linked correctly. Because it works without defer and async values. file.js and the html file are located in a same folder in my case.

Dan Knights Over a year ago

That's odd. What exactly isn't working? Is any of the code from file.js running how you want it?

Hamed Baziyad Over a year ago

I write a simple code in file.js as document.write("something").

Dan Knights Over a year ago

"Using document.write() after an HTML document is fully loaded, will delete all existing HTML." Is this what's happening?

|

Collectives™ on Stack Overflow

Why Javascript codes cannot be executed when async or defer are set in script tag?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related