Как правильно организовать синхронизацию между асинхронными JavaScript модулями в браузере?

Как можно сделать объекты, инициализированные асинхронно в some.js, доступными глобально на HTML-странице без использования .onload и setInterval?
  • 6 мая 2024 г. 18:51
Ответы на вопрос 2
Для организации синхронизации между асинхронными JavaScript модулями в браузере можно использовать асинхронные функции или промисы. 

Вот пример того, как можно сделать объекты, инициализированные асинхронно в some.js, доступными глобально на HTML-странице:

1. В файле some.js создайте объект или функцию, которую вы хотите сделать доступной глобально:

```javascript
let myObject = {
  foo: 'bar'
};
```

2. Используйте промис для асинхронной инициализации объекта:

```javascript
let myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    // Инициализируем объект myObject
    resolve(myObject);
  }, 1000);
});
```

3. В HTML-файле, где вы хотите использовать этот объект, добавьте скрипт, который будет ожидать завершения инициализации объекта и делать его доступным глобально:

```html
<script>
  (async function() {
    const myObject = await myPromise;
    window.myObject = myObject;
    console.log(myObject.foo); // Выведет 'bar'
  })();
</script>
```

Теперь объект, инициализированный асинхронно в some.js, будет доступен глобально на вашей HTML-странице без необходимости использования .onload или setInterval.
Это плохая идея, я тебе скажу. Асинхронный код не от хорошей жизни асинхронный - длительные операции вешают страницу, спасибо однопоточному браузерному JS. <br/> Так что если нужно что-то большое грузить при старте - лучше делать асинхронно, дальше использовать через callbackи, раз уж async-await не хочешь делать.
Похожие вопросы