Почему не сохраняется порядок выполнения скрипта с defer?

Question

[Let_peace]

В конце html страницы загружаю скрипты:

<script defer src="./../js/jquery-3-5-1.js"></script>
<script src="./../js/1.js"></script>
<script defer src="./../js/2.js"></script>
<script defer src="./../js/3.js"></script>
<script src="./../js/4.js"></script>

важно, чтобы 3 скрипт загружался после 2. порядок остальных не важен (ну jquery в самом начале, очевидно)
Несмотря на defer скрипт 3 выполняется до 2
В скрипте 2 есть запрос к json: $.getJSON, так что мб из-за этого происходит всё не так, как я хочу. Короче говоря, не могу понять, в чём проблема, и прошу экспертов помочь))

Comments

[WapSter]

Прочитать что происходит, когда пользуешься атрибутами async/defer. Ставь событие, пока не загрузится нужный скрипт

Answer 1

[DimaIs]

Все выполняется как и задуманно, проблема только в том, что $.getJSON является асинхронным методом, иначе говоря результатом выполнения скрипта 2.js является сам запуск этого запроса, но не ожидание его завершения.

Comments

[Let_peace]

хорошо, а как это решить? дописать что-то внутри самого скрипта с $.getJSON?

[DimaIs]

Let_peace, лучше всего используйте модули. Например, экспортируйте нужную функцию из файла 3.js (а не выполняйте ее там), и импортируйте в 2.js с передачей этой функции в тот же success параметр у $.getJSON.
Почитать:
Модули
Promise

[Let_peace]

Изучу этот вопрос, спасибо)

Answer 2

[WbICHA]

Какой смысл использовать defer в конце html?

Но это детали, основная суть в том, что синхронные скрипты будут выполняться именно так, как ты и хочешь, сначала один, а только потом второй.
В твоём же случае, очевидно, используется асинхронный код. Таймауты ты вряд ли используешь, а вот промисы да. И если промис не выполняется мгновенно, то далее начинает грузиться скрипт номер 3.

А вообще, зачем вот этот вот ужас, когда есть модули и там эта проблема решается на раз-два?