CODEWITHSUNDEEP
javascriptjquery
Kevz
Kevz

Reputation: 634

Adding "async" in external javascript error

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.

Upvotes: 0

Views: 284

Answers (2)

Tor Brekke Skj&#248;tskift
Tor Brekke Skj&#248;tskift

Reputation: 190

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

Upvotes: 1

slebetman
slebetman

Reputation: 113876

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

Upvotes: 1

Related Questions