Почему не работает async/await в примере?

Question

[uRoot]

Есть такой код:


Необходимо скопировать селект из DOM-а до того, как его обработает библиотека Choices.js (дальше он вставляется по клику, в песочнице это не стал отображать). Хотел решить задачу при помощи async и await:

async function f1() {
  await copyDiv() // копируем div
  await choicesInit('select', {searchEnabled: false, shouldSort: false, itemSelectText: ''}) // обрабатываем библиотекой
  await c1() // выводим скопированный div
}
f1();

Но это не работает. Функция choicesInit обрабатывает select до того, как функция copyDiv скопирует select в переменную (это можно понять из того, что select скрыт и навешаны классы). Я не могу понять почему так.

Answer 1

[Роман]

choicesInit copyDiv и c1 у вас обычные синхронные функции. Для них не надо писать await

Сейчас гляну дальше и отпишусь если найду другие косяки

немного изменил ваш пример убрав лишние await-ы и вставив контрольный вывод в консоль для отслеживания порядка вызовов.
https://jsfiddle.net/c02zeh3n/

на выходе имеем правильный порядок: 0, 1, 2, 3, 4, 5 (смотрите вывод в консоль) а значит await у вас отрабатывает верно

Comments

[uRoot]

Я пробовал на коллбеках это же сделать где в copyDiv() я возвращал choicesInit(), то результат тот же

[Роман]

CryNet, я немного не понимаю чего именно вы хотите добится.
Почему вы считаете что код не дожидается завершения выполнения choicesInit. Всавил в ответ свой (слегка модернизированный) пример. По выводу в консоль четко видно что порядок вызовов был соблюден

[Роман]

CryNet, А это говорит что проблема в чем то другом. Как я могу понять что проблема сохранилась (или была устранена)? Что я делжен увидеть (или не увидеть) в выводе alert-а?

[uRoot]

Роман,

Что я делжен увидеть (или не увидеть) в выводе alert-а?

Увидеть, что в переменной лежит чистый селект (в DOM-е он уже будет обработан библиотекой), без классов, которые навешивает библиотека. Мне это нужно :)

Мне вообще нужно сделать следующее:
1) Скопировать селект из DOM-а
2) Обработать библиотекой селекты на странице
3) Потом по клику юзера на кнопку скопированный ранее селект вставляется в DOM и снова обрабатывается библиотекой.

Но всю эту историю не стал тащить в песочницу, чтобы не запутать

[Роман]

обратите внимание на то, что choicesInit у вас так же синхронная. соответственно await для нее тоже не нужен.
Не знаю сто возвращает конструктор класса Choices, но если он возвращает промис, то вы должны дождаться его выполнения внутри choicesInit. Для этого потребуется choicesInit сделать асинхронной и возвращать из нее промис

[uRoot]

Роман, блин. Вот какой результат мне нужен:

https://jsfiddle.net/w9mp82uc/3/

[Роман]

CryNet, извините отходил. Рад что у вас все получилось. Надеюсь хоть чем то был вам полезен.