index.js:
import Messaging from './messaging.js';
const messaging = new Messaging('messaging-people__human', 'messaging-people__message');
(async () => {
await messaging.prepareElements();
console.log('Second');
messaging.start();
})();
messaging.js:
class Messaging {
constructor (elementClassName, messageClassName) {
this.elementClassName = elementClassName;
this.messageClassName = messageClassName;
this.elements = [];
}
_getSvg (element) {
const objects = element.querySelectorAll('object');
const object = objects[objects.length - 1];
return new Promise (resolve => object.addEventListener('load', () => {
resolve(object.contentDocument.querySelector('svg'));
}));
}
async prepareElements () {
const elements = document.querySelectorAll(`.${this.elementClassName}`);
const prepareElement = async (element, i) => {
let [mainSvg, messageSvg] = await Promise.all([this._getSvg(element), this._getSvg(element.querySelector(`.${this.messageClassName}`))]);
this.elements.push({
id: i + 1,
nodes: {
main: element,
mainSvg: mainSvg,
messageSvg: messageSvg
},
isMessaging: false,
messagingInfo: {
color: '#000'
}
})
return {mainSvg, messageSvg};
};
// Если использовать один await, то скрипт работает нормально
// await prepareElement(elements[0], 0);
// А если в цикле, то не заканчивается никогда
let i = 0;
const elementsPrepared = [];
for (let element of elements) {
elementsPrepared.push(await prepareElement(element, i));
i++;
}
console.log('First');
return elementsPrepared;
}
start () {
console.log('Third');
console.dir(this.elements);
}
}
export default Messaging;
При одном await
выводятся сообщения 'First', 'Second' и 'Third' и index.js
дожидается конца асинхронной функции, а если использовать несколько await
внутри цикла, то скрипт не доходит даже до console.log('First')
, уходит в бесконечное выполнение без каких-либо ошибок. Транспайлер Babel
, сборка Webpack
. В чем может быть проблема?
prepareElements
иprepareElement
не возвращают промисы.