Adding "async" in external javascript error

Question

My aim was to async my external javascript so that the rendering of the website won't be blocked and of course as what async do, load the javascripts afterwards.

But the problem is that it seems like my external javascripts are totally prevented to load.

So here is a sample of my code (Not exact). When the user clicks add the input increments the number on a certain amount. It is from jquery where it gets its clicking and order.js to get the calculation

<!doctype html>
<html lang="en"> 
    <head>
        <script async src="/js/jquery.min.js"></script>
        <script async src="/js/order.min.js"></script>
    </head>
    <body>
        <p>Hello World</p>
        <input type ="text">
        <button id="add">+</button><button id="sub">-</button>
    </body>
</html>

The problem is that the clicking does not work and I don't know what to do.

I want to improve the loading time but async does not work for jquery. Because, without inputting async there should be a default value but when I add async no default value (value from order.js) and button does not work (jquery).

Update: I tried using "defer" but the problem is just the same as async. Buttons does not work for jquery and there is no default value for the input.

does not work Can you explain? See idownvotedbecau.se/itsnotworking You might want to ensure jQuery loads before running order — CertainPerformance
– CertainPerformance, Commented Aug 23, 2018 at 8:04
Hope your jquery code in encapsulated by this. You can only do jquery stuff after loading jquery and other dependency. $(window).on("load", function(){$.ready.then(function(){ //Your code should be here }}); — amku91
– amku91, Commented Aug 23, 2018 at 8:11
@amku91 What advantage should $(window).on("load", function(){$.ready.then( have? the ready event is fired the load event or at the same time. — t.niese
– t.niese, Commented Aug 23, 2018 at 8:12
Possible duplicate of Any way to control Javascript Async Load Order? — t.niese
– t.niese, Commented Aug 23, 2018 at 8:13
If you have two async scripts then those script should not depend on each other, because the execution order is not defined (the file that was loaded and parsed first will be executed first), use defer instead. — t.niese
– t.niese, Commented Aug 23, 2018 at 8:14

slebetman · Accepted Answer · 2018-08-23 08:48:39Z

If this fails consistently (almost every time) then the problem is that order.min.js is smaller and is faster to load than jquery.min.js. This means that this:

    <script async src="/js/jquery.min.js"></script>
    <script async src="/js/order.min.js"></script>

ends up being this:

    <script src="/js/order.min.js"></script>
    <script src="/js/jquery.min.js"></script>

So order.min.js will try to use jquery functions before jquery is loaded. Which will obviously fail.

The fix is either make jquery load synchronously:

    <script src="/js/jquery.min.js"></script>
    <script async src="/js/order.min.js"></script>

Or wrap the code in order.min.js in something that will detect jquery:

// Inside order.js:
function wait_for_jquery () {
    if (window.jquery !== undefined) {

        // put the rest of the code for order.js here

    }
    else {
        setTimeout(wait_for_jquery,100); // check 10 times per second
    }
}
wait_for_jquery();

Another common technique is to use a bundler like webpack or browserify to compile both jquery and order.js into a single file

Tor Brekke Skjøtskift · Accepted Answer · 2018-08-23 09:01:19Z

1

Try defer

<script defer src="/js/jquery.min.js"></script>
<script defer src="/js/order.min.js"></script>

This prevents the scripts from blocking the page and load them in order

answered Aug 23, 2018 at 9:01

Tor Brekke Skjøtskift

1901 silver badge5 bronze badges

Collectives™ on Stack Overflow

Adding "async" in external javascript error

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related