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

Question

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

            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 = [];

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

Answer 1

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

Answer 2

我不确定 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
}