Javascript асинхронное поведение для циклов

Question

Я выбирал данные асинхронно, используя async / await, и затем я запускаю два цикла for один за другим.Поэтому мой вопрос: будут ли циклы for перекрывать друг друга для больших наборов данных, так как js является асинхронным, и если да, как это решить?И для каких условий циклы могут перекрываться?

На самом деле, я пытаюсь сделать раскрывающийся список и он работает, но у меня было это сомнение.

const createDropdown = async language => {
    let i = 0;
    let listPromise = new Promise((resolve, reject) => {
        db.ref("Products/" + language).on('value', snapshot => {
            resolve(snapshot.val())
        })//Fetching Data
    })

    let list = await listPromise;

    for(i in list)
        dropdown.remove(0)

    for(i in list)
        dropdown.options[dropdown.options.length] = new Option(list[i].name, list[i].name)
}

Я запускаю этот код и циклы forне перекрываются, но есть условие, что это будет?

Answer 1

Циклы, которые помещаются в код один за другим, никогда не будут перекрываться, либо код внутри циклов является синхронным или асинхронным.

for (var i = 0; i < 10; i++) {
    doSomethingSync()
}



for (var j = 0; j < 10; j++) {
    createPromise().then((res) => {console.log(res))
}


for (var k = 0; k < 10; k++) {
    var res = await createPromise();
    console.log(res);
}

Выше цикл «I» завершает все свои операции, затем цикл «J», а затем цикл «K».

Вот порядок и детали каждой операции

1. Цикл «I» сериализует 10 синхронных операций.
2. Цикл "J" создает 10 различных обещаний. Возможно, они решены в другом порядке.
3. Цикл "K" создает 10 сериализованных обещаний. Каждая итерация ждет, пока не будет выполнено обещание, прежде чем перейти к чистой.

1, 2 и 3 всегда происходят один за другим.

Answer 2

Я использовал это решение для работы с axios, около 1000 запросов к серверу и работает нормально, возможно, это может быть и вашим решением. В этом коде вы дадите обещание своего db.ref и дождетесь ответа, а затем используете его для манипулирования.

const createDropdown = async (language) => {
  const listPromise = await Promise.all(
    return await db.ref("Products/" + language).on ('value', snapshot => snapshot.val())
  )

  for(i in listPromise)
        dropdown.remove(0)

  for(i in listPromise)
        dropdown.options[dropdown.options.length] = new Option(list[i].name, list[i].name)
}