Running multiple scripts on async defer problems

Question

I have 2 scripts which should be run with async defer. but the problem is that the 2nd script relies on the first one. js-map-label.js needs to be run only after googleapis has been loaded and running. it works 80% of the time with this setup. but sometimes it wouldn't run, so I had to refresh over and over till the js-map-label.js runs. Is there any way to fix this?

I have these scripts in this order:

    ...
    <script src="https://maps.googleapis.com/maps/api/js?key=__MY_KEY_HERE__...." async defer></script>
    <script src="/static/js/js-map-label.js" async defer></script>
    ...
</body>

It would sometimes raise this error:

js-map-label.js:13 Uncaught ReferenceError: google is not defined
    at js-map-label.js:13
    at js-map-label.js:16

Duplicate of [Script Tag - async & defer](https://stackoverflow.com/questions/10808109/script-tag-async-defer) — MrUpsidown, Feb 10 '20 at 12:33
@MrUpsidown As far as i can see, this post you said as possible duplicate doesn't seem to consider using async and defer at the same time and doesn't talk about the consecuences of that. This question doesn't seem a duplicate to me — jeprubio, Feb 10 '20 at 16:53
@jeprubio Quote from the accepted answer: *If your second script depends upon the first script (e.g. your second script uses the jQuery loaded in the first script), then you can't make them async without additional code to control execution order, but you can make them defer because defer scripts will still be executed in order, just not until after the document has been parsed.* - is that not what we are talking about here and what you also included in your answer? — MrUpsidown, Feb 10 '20 at 17:03
@MrUpsidown Well, I still think it's not the same even though I agree that it's quite similar. If you all think it's the same you can close it, of course, I have nothing else to say. I was just pointing out that the other question & answer doesn't seem to consider using script and defer at the same as the OP did and the consequences. For example, it doesn't say that is a possible fall back and which would be the behaviour in different browsers in that case. Just this. For me this question goes a step further, but it's just my opinion — jeprubio, Feb 10 '20 at 17:15
@MrUpsidown as i said, i accepted the answer "for now" since it solved my current predicament. Should there be a time where I would need to run both on async defer? (not really sure if there would be any tho.) — Christopher, Feb 11 '20 at 03:43

jeprubio · Accepted Answer · 2020-02-10T09:31:14.277

With defer, the file gets downloaded asynchronously, but executed only when the document parsing is completed. Alswo with defer, scripts will execute in the same order as they are called. This makes defer the attribute of choice when a script depends on another script.

With async, the file gets downloaded asynchronously and then executed as soon as it’s downloaded.

In your case you can use defer so that the javascripts are executed when the document parsing is completed but not async if you want the dependencies to be preserved:

<script src="https://maps.googleapis.com/maps/api/js?key=__MY_KEY_HERE__...." defer></script>
<script src="/static/js/js-map-label.js" defer></script>

In practice, defer is used for scripts that need the whole DOM and/or their relative execution order is important. And async is used for independent scripts, like counters or ads. And their relative execution order does not matter.

From the specification: https://www.w3.org/TR/2011/WD-html5-20110525/scripting-1.html#attr-script-async

The defer attribute may be specified even if the async attribute is specified, to cause legacy Web browsers that only support defer (and not async) to fall back to the defer behavior instead of the synchronous blocking behavior that is the default.

So if you use both modern browsers will only do async and won't perserve execution order.

thanks, its working as of now XD. But I could've sworn I tried this. haha. Also thanks for the best practice on when to use them :) — Christopher, Feb 10 '20 at 09:49

Running multiple scripts on async defer problems

1 Answers1