数组显示为空，但应该有一个元素

Question

好的，伙计们，我在我一直在处理的一些代码上遇到了问题。在下面的代码中，我试图通过控制台记录数组的长度，但是在打印到控制台后，我得到数组长度的输出 0，当我打印数组本身时，它显示它是空的，但我可以单击下拉箭头并查看其中的元素。// randomly selects card from arrayexport const selectCard = arr => {    const randomArr = Math.floor(Math.random() * arr.length);    console.log(arr.length);    console.log(arr);}记录数组长度和内部包含元素的空数组的图像。为了测试发生了什么，我决定将数组记录在一个不同的函数中，该函数位于创建数组的同一文件中。数组 ( blackCards) 存储在一个对象中。let packArr = {  data: {},  packToUse: [],  whiteCards: [],  blackCards: [],};blackCards控制台在另一个函数中记录数组 ( ) 会记录以下内容：const seperatePacks = (data) => {  // add white cards to array  packArr.whiteCards.push(data.whiteCards);  // add black cards to array  packArr.blackCards.push(data.blackCards);  // console log blackCards array  console.log(packArr.blackCards);};来自不同函数的记录数组的图像，该函数位于创建和存储数组的同一文件中。这里有更多关于我的代码如何工作的信息。当用户单击按钮时，将激活一个事件侦听器，该侦听器调用最终从服务器获取 json 的其他函数，然后我将该数据添加到数组中，您可以在上面的代码中看到。因此，既然您知道代码是如何工作的，那么我就可以了解导致我更加困惑的原因。所以，在第一次点击时，我得到了所有先前代码和图像组合的结果，但是如果我再次点击同一个按钮，或者点击不同的按钮，我会得到想要的结果（如果我点击两个按钮我得到数组中的两个元素，所以它工作正常）。因此，单击两次或多次，程序就会按应有的方式运行。这里的任何帮助都会很棒。如果这篇文章有点磨损也很抱歉，这是我的第一篇。以下是最终调用的函数selectCardelements.packs.addEventListener("click", (e) => {  const packID = e.target.closest(".pack").id;  if (packID) {    packsToUse(packID);    // create black cards    blackCardDisplay(packArr.blackCards);  }});上面是前面提到的监听器，它调用下面的函数，它会调用selectCard.export const blackCardDisplay = data => {    const card = `        <div class="cards card--black">            <h1 class="card--black-text card--text">${selectCard(data)}</h1>        </div>    `;}这是按下两个按钮后的输出。该数组应该包含两个元素，但在这种情况下它只显示一个。但是，当我展开数组时，它显示的长度为 2 而不仅仅是 1。单击两次按钮的控制台图像编辑：在阅读了一些评论后，我意识到我忘了提到的内容blackCards是一个数组。所以我在一个数组中有一个数组。

Answer 1

因此，在阅读了一些评论后，我决定实施@charlietfl 的评论，即数组可能在 ajax 调用完成之前被控制台记录。虽然这并没有明确解决问题，但它让我走上了解决方案的正确轨道。

这是我解决这个问题的方法：

我接受了关于在 ajax 调用完成之前完成控制台日志的评论，并从那里进行了一些研究，发现了这篇非常简单的文章：

https://www.programmersought.com/article/26802083505/

在这篇文章中是一个使用该setTimeout()方法的例子。

这是我的问题的最终解决方案。

export const selectCard = arr => {

    const randomArr = Math.floor(Math.random() * arr.length);

    setTimeout(() => {

        console.log(arr.length);

        console.log(arr)

    }, 1000);

}

这是在setTimeout()第一次按下按钮时添加方法后的输出。

解决的数组长度和数组控制台日志的图像

我不知道这是否是该问题的最佳解决方案，因为过去我看到有些人不赞成使用这种方法，但它对于我目前正在做的事情来说效果很好。如果有人有更好的方法来解决这个问题，我很想听听！