我正在尝试在加载时运行两个函数，一个需要先运行，以便第二个可以填充框列表，但是，第二个没有得到数组

如何解决我正在尝试在加载时运行两个函数，一个需要先运行，以便第二个可以填充框列表，但是，第二个没有得到数组

我在加载页面时尝试运行两个函数。 dataRetrieve() 从 Firebase 集合中获取数据。 populate() 应该使用从 dataRetrieve() 检索到的条目填充框列表。主要问题是，无论我尝试什么，当我在 populate() 之后运行 dataRetrieve() 时，它都会将数组列为空。我尝试的最后一件事是：

            async function dataRetrieve(){
                const getAdmins = firebase.functions().httpsCallable('getAdmins');
                        // Passing params to data object in Cloud functinon
                getAdmins({}).then((results) => {
                    admins = results;
                    console.log("admins retrieved");
                    console.log(admins);
                }).then(() => {
                    populate();
                });
            }

async function populate(){

                let list = document.getElementById("user-list");

                //loop through users in out Users object and add them to the list
                for (var i = 0; i < admins.length; i++) {
                    let newItem = document.createElement('option');
                    newItem.innerHTML = admins[i].first + " " +admins[i].last;
                    newItem.id = admins[i].uid;
                    if (i == 0) {
                        newItem.className = "active";
                    }
                    console.log(newItem.innerHTML + "  " + newItem.id)
                    list.appendChild(newItem);
                }

                updateResponse(list.firstChild);

                list.size = admins.length;
                console.log(document.getElementById("user-list").size)
                //collect all the list items
                let listItems = list.querySelectorAll('option');

                //loop through the list itmes and add a click listener to each that toggles the 'active' state
                for (var i = 0; i < listItems.length; i ++) {
                listItems[i].addEventListener('click',function(e) {
                    if (!e.target.classList.contains('active')) {
                    for (var i = 0; i < listItems.length; i ++) {
                        listItems[i].classList.remove('active');
                    }
                    e.target.classList.add('active');
                    
                    updateResponse(e.target);
                    }
                })
                }
            }

此外，admins 是脚本开头列出的全局变量：

            var admins = [];

我正在尝试运行所有这些 onload，以便我可以立即生成列表 我认为 .next 会导致它在运行之前等待获取值，但即使将结果作为参数并将其直接传输到函数中也会给出一个未定义的数组。我不明白为什么该函数坚持调用旧数据。请帮忙。

解决方法

我不确定 updateResponse 函数的作用。如果它没有返回承诺，那么我会首先使 populate 函数同步。除了填充函数是全局变量之外，您是否真的需要在其他地方使用 admins 数组？如果没有，那么我只是将它作为参数传递。

async function dataRetrieve() {
  const getAdmins = firebase.functions().httpsCallable('getAdmins');
  // Passing params to data object in Cloud function
  const results = await getAdmins({})
  console.log("admins retrieved");
  console.log(results);
  // Passing results in populate function
  populate(results.data)
  // If your function returns an array,pass the array itself
}

function populate(admins) {
  let list = document.getElementById("user-list");

  //loop through users in out Users object and add them to the list
  // Using a for-of loop instead so no need to worry about checking the length here
  for (const admin of admins) {
    let newItem = document.createElement('option');
    newItem.innerHTML = admin.first + " " + admin.last;
    newItem.id = admin.uid;
    //if (i == 0) {
    //  newItem.className = "active";
    //}
    console.log(newItem.innerHTML + "  " + newItem.id)
    list.appendChild(newItem);          
  }

  updateResponse(list.firstChild);

  // rest of the logic
}

,

我想您知道如何检查页面何时加载。加载页面时调用检索函数。然后您应该在检索函数的末尾调用 populate 函数。这可以确保在获取所有数据后调用 populate 函数