1

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. В чем может быть проблема?

2
  • У вас prepareElements и prepareElement не возвращают промисы. 18 мая 2018 в 4:14
  • Stepan Kasyanenko, добавил возврат значений, код по-прежнему не работает
    – Janealter
    18 мая 2018 в 7:56

1 ответ 1

0

Скорее всего у вас проблема в том, что не срабатывает событие load у вашего object. Возможно, не грузится, возможно у уже загруженного object событие вызываться не будет.

Я не знаю логику вашего приложения, поэтому много посоветовать не могу.

Что могу посоветовать:

  • Возможно, можно проверить если object уже загружен, получить object.contentDocument.querySelector('svg') и если он есть, то потом уже выполнять resolve.

  • Также, возможно стоит добавить таймаут на ожидание загрузки.

Посмотрите сделанный мной пример. В нем некоторые object уже как бы загружены, на остальных симулируется успешная загрузка.

Пример на jsfiddle.

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, reject) => {
      // Если object уже загружен
      var svg = object.querySelector('svg');
      if (svg) {
        resolve(svg);
        return;
      }
      var timerId = setTimeout(() => reject("timeout"), 5000);
      // симулируем успешную загрузку
      setTimeout(() => {
        clearTimeout(timerId);
        resolve(object);
      }, 2000);
      object.addEventListener('load', () => {
        clearTimeout(timerId);
        resolve(object.contentDocument.querySelector('svg'));
      });
      object.addEventListener('error', () => { // This event doesn't work
        clearTimeout(timerId);
        reject("Load error");
      });
    });
  }

  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);
  }
}
const mess = new Messaging('messaging-people__human', 'messaging-people__message');

(async() => {
  try {
    await mess.prepareElements();
    console.log('Second');
    mess.start();
  } catch (ex) { // Перехватываем ошибки
    console.error(ex);
  }
})()
<div class="messaging-people__human">
  <object></object>
  <div class="messaging-people__message">
    <object>
      <svg></svg>
    </object>
  </div>
</div>
<div class="messaging-people__human">
  <object>
    <svg></svg>
  </object>
  <div class="messaging-people__message">
    <object></object>
  </div>
</div>

P.S. У вас возможно еще не правильно работают строчки

const objects = element.querySelectorAll('object');
const object = objects[objects.length - 1];

Потому что для элементов .messaging-people__human, .messaging-people__message находится один и тот же object.

7
  • Логика приложения в том, чтобы просто получить ноды svg изнутри object и записать ссылки на них в объект. Как я буду работать с ними дальше - это не важно. Если получать одну ноду через await, то все работает, а если несколько, то нет (срабатывает error timeout). Вот это для меня главная загадка, очень хочется понять причину.
    – Janealter
    29 мая 2018 в 17:42
  • Скорее всего события load выстреливают раньше, чем вешаются listener'ы на них. Пока скрипт ждет load от первого object, остальные уже выстреливают, и, при следующей итерации, он уже никогда не дождется этого события. Все как вы описали вначале сообщения.
    – Janealter
    29 мая 2018 в 18:04
  • @Janealter тут вы немножко не правы. Скрипт не ждет, когда загрузится первый object, он работает асинхронно. Но вы правы, на уже загруженном object(может быть взят из кеша - это быстро) событие onload не работает. Посему, попробуйте то что я предложил - Возможно, можно проверить если object уже загружен, получить object.contentDocument.querySelector('svg') и если он есть, то потом уже выполнять resolve 30 мая 2018 в 4:23
  • @Janealter я обновил ответ. Теперь проверяется на уже загруженный object и симулируется успешная загрузка у других object. 30 мая 2018 в 4:50
  • @Kasyanenko Я ведь вызываю функцию через await, значит скрипт ждет, пока она выполнится асинхронно: await prepareElement(elements[0], 0); - первый вызов, скрипт ожидает выполнения асинхронной функции, которая вешает листнер на load и выполняет что-то, когда load выстрелит. await prepareElement(elements[1], 1); - второй вызов, будет выполнен только после успешного/неуспешного результата первого. Событие load у object из elements[1] уже выстрелит, пока ожидается ответ от первого await, поэтому в данном случае листнер не поймает его.
    – Janealter
    30 мая 2018 в 8:53

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.