Asynchronous / Deferred JavaScript issue

Question

I am using this code at footer for Eliminate render-blocking resources

<script async or defer src="/jquery.js">
 /* custom code  */
<script>    
$(document).ready(function(){
$('.menu-bar').click(function(){
   $('.nav-bar').slideToggle();
  }); 
  $('.dropdown').click(function(){
      $(this).toggleClass('inDrop');
      $('.dropdown-menu').slideToggle('slow');
  });

});
</script>

Now I am getting Uncaught ReferenceError: $ is not defined error.

what is best way to use Asynchronous / Deferred JavaScript

You can't have code inside a script with src. They need to be separate <script> tags. — Barmar
– Barmar, Commented May 16, 2020 at 6:25
And you can't use async if you need to use the library in another script tag. — Barmar
– Barmar, Commented May 16, 2020 at 6:26

Joel Hager · Accepted Answer · 2020-05-16 07:07:03Z

1

Async is tough, because it'll execute the minute it finishes, so you can't tell the order in which scripts will finish being retrieved. It's also negligible compared to defer, which will wait until the HTML parses before it starts, and then it starts in order.

Here are two cases:

<HTML start>
<async js 1>
<async js 2 (dep on 1)>
<HTML parses>
<js 2 finishes and executes>
<js 1 finishes and executes>
<HTML finishes parsing>

Defer:

<HTML start>
<defer js 1>
<defer js 2 (dep on 1)>
<js 2 loads, and waits>
<js 1 loads, and waits>
<HTML finishes parsing>
<js 1 is fired>
<js 2 is fired>

You can keep your dependencies with defer. I use defer 99.9% of the time, and only if the order of your scripts is not important.

If you need the inline js to wait until the dependencies are loaded, you would wait for the document ready state.

jQuery:

`$(document).ready(function() {
  ...code here...
};`

vanilla JS:

`document.addEventListener("DOMContentLoaded", function() {
  ...code here...
};`

edited May 16, 2020 at 7:07

answered May 16, 2020 at 6:27

Joel Hager

3,4683 gold badges26 silver badges57 bronze badges

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

5 Comments

Yogesh Saroya Over a year ago

Joel Hager Over a year ago

Edit I misread. Yes. Calling jQuery first and both deferred will make it stay dependent.

Yogesh Saroya Over a year ago

its working if i use JS file for custom code. but not working for inline js code

Joel Hager Over a year ago

Well yes. Because inline js is in the HTML that's being parsed. You can't defer a library the inline HTML depends on because it would defer behind the inline code.

Joel Hager Over a year ago

What you would do is wrap your code in a loaded/ready state. Like this: $(document).ready(function() { ...code here...} without jQuery: document.addEventListener("DOMContentLoaded", function() { ...code here... };

Collectives™ on Stack Overflow

Asynchronous / Deferred JavaScript issue

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related