Async, js модули, в браузере как правильно сделать синхронизацию?

Question

[pvvv]

есть примитивная html страница с
<script src='some.js'></script>
с асинхронными функциями которые в результате инициализируют некие объекты.
Что именно надо вернуть из some.js и как? и сделать объекты глобальными?

Чтобы потом можно было где-нибудь дальше можно было их спокойно использовать синхронно, как будто ничего асинхронного и не было.
<script>someFunction(someObject);</script>
Ну не вешать же эту инициализацию на какой-нибудь .onload с паузой в setInterval пока не загрузится?

Comments

[Алексей Ярков]

Код где?

[pvvv]

забыл обернуть в код - парсер пожрал :(

пусть будет например загрузка wasm в отдельном файле somefile.js с асинхронными функциями

async function init(){
instance = await WebAssembly.instantiate(await load('...wasm...'),{env:env})).instance;
}

и соответсвенно в html
<script src="somefile.js"></script>
как правильно дождаться выполнения асинхронных функций и возвращать объекты из этого somefile.js чтобы далее в html файле испольвать их в других <script>console.log(wasm)</script> "синхронно" ?

[historydev]

Может поможет:
https://learn.javascript.ru/external-script#:~:tex....

[pvvv]

не особо помого,
async и defer для скриптов вроде бы не особо затрагивают выполнение собственно асинхронных функций.
я в принципе понимаю как это делать правильно, но хочестся странного: без передачи коллбэков, не меняя ничего в остальных скриптах, в первом внешнем скрипте somefile.js просто подождать выполнения асинхронной инициализации и потом продолжить дальше остальные скрипты (в том числе и не внешние на которые defer не работает) как будто ничего асинхронного и не было.

[Михаил Ливач]

pvvv, Вы в общем-то сами себе ответили:

async function init(){
instance = await WebAssembly.instantiate(await load('...wasm...'),{env:env})).instance;
instanceTwo = await WebAssembly.instantiate(await load('...wasm...'),{env:env})).instance;
// ....
}

Как только все await-ы отработают, у Вас всё загрузилось. Если хочется параллельного запуска, то придётся использовать промисы.
Про область видимости Вы тоже в общем-то правы: либо как-нибудь возвращайте объекты из init - например, return [instance, instanceTwo, ] . Либо пихайте их в глобальную область видимости или ещё куда ( например, в глобальной области сидит Map, и Вы пихаете в него ).

[pvvv]

параллельного запуска как раз не хочется, но загрузка сделана исключительно через промисы.

вопрос как всё остальное затормозить пока сама функция init отработает (и куда её, кстати, лучше засунуть? в window.onload?), ведь <script>await init()</script> нельзя сделать.
Чтобы остальные встроенные тэги <script> заведомо получили проинициализированные глобальные объекты, и не пришлось ничего в них менять, запихивая в колбэки init'а.

[Михаил Ливач]

pvvv, наконец-то я понял. То, что Вы хотите - это jQuery. Соответственно, Вам нужен тот же подход; "лапша" <script> ... </script> , раскиданная по странице, должна быть не просто императивным кодом, а именно постановкой колбэков в очередь исполнения.
А init(), например, в конце своей работы запустит накопленную очередь на исполнение. ( Может быть, в jQuery сделано как-то поумнее, не смотрел )

[pvvv]

Михаил Ливач, спасибо конечно за jQuery, но прикоснувшись совсем недавно в первые в жизни к волшебному миру УЭБпрограммирования, я от простого яваскрипта всё никак разо##еть обратно не могу пока.

Ведь если бы вместо wasm (с его обязательной асинхронной загрузкой) был бы просто чистый js без асинхронных функций, то всё нормально и так по очереди исполнялось бы.
Неужели нет способа поломать единственный асинхронный вызов, сделав его обратно синхронным, чтобы больше ничего не трогать?

Answer 1

[Vindicar]

Это плохая идея, я тебе скажу. Асинхронный код не от хорошей жизни асинхронный - длительные операции вешают страницу, спасибо однопоточному браузерному JS.
Так что если нужно что-то большое грузить при старте - лучше делать асинхронно, дальше использовать через callbackи, раз уж async-await не хочешь делать.

Comments

[pvvv]

Это не тот случай.
Пока то "большое", на аж целых 50кБ wasm не загрузится, всему остальному на странице делать всё равно абсолютно нечего. И будут все остальные ждать загрузки и выполнения первого скрипта "синхронно" (если бы это был просто файл.js), или рассевшись в асинхронную очередь awaitов или цепочку колбэков - разницы вообще никакой.

Вот если у меня в html первой строкой идёт

<script src='несколько мегабайт яваскрипта.js'></script>

то всё нормально и потом дальше разбросанные по странице встроенные скрипты по очереди выполнятся. Но если вдруг 50кБ wasm, то его обязательно надо загружать асинхронно и потом дополнительно расставлять костыли синхронизации всем остальным, потому что порядок исполнения теперь какой попало.

Answer 2

[pvvv]

Михаил Ливач,
если внутри самого скрипта я асинхронную функцию async function init() {...}
я засуну в его же собственный document.currentScript.onload = init привязав его тем самым к загрузке первого скрипта, то тогда для всей остальной "лапши" из <script> ... </script> внутри html порядок выполнения не нарушится и изначально асинхронная init() выполнится синхронно со всеми остальными, или у этого решения есть какие-то неочевидные недостатки?

Comments

[Михаил Ливач]

это слишком сложно для меня. Может, кто-то более знающий сможет ответить.

[pvvv]

отвечу сам, хоть и не знаю.
Любой await всё равно поломает синхронность выполнения. И придётся возвращать промисы и ожидать их во всех следующих зависимых скриптах, которые надо будет ещё и как type="module" объявить (что вероятно поломает и их порядок даже без await). И дополнительно так же синхронизировать и сами встроенные скрипты, так как не уверен что с await порядок их выполнения сохранится.
Тем не менее есть крайне дурацкие способы поломать асинхронность через вебворкеров (deasync), но пользоваться ими я пожалуй не буду.

а вообще про принудительную асинхронную загрузку "тому кто это придумал надо гвоздь в голову забить" (с) ДМБ

причём есть возможность синхронной загрузки wasm меньше аж 4кБ (там вроде это ограничение хотели увеличить, но если даже и увеличили, не уверен что можно полагаться что оно будет работать везде).