数组无法填充

Question

function draw(data)
{
var i = 0;
var checkduplicates = new Array();
drawOne(i);
//console.log(checkduplicates) Problem!!!;

function drawOne(i)
{
         //photos is a object that has been omitted for simplicity
    var picinfo = photos[Math.floor(Math.random()*photos.length)];
    checkduplicates.push(picinfo);

    img.onload = function()
    {
        var ctx = document.getElementsByClassName("canvas")[i].getContext('2d');
        // Draw pieces
        ctx.drawImage(img,0,0,132,150);
        //ctx.fillText("haha",0,0);
        ctx.drawImage(frame,0,0,133,152);
        i++;
        if (i != canvaslength)
        {
             drawOne(i);
        }
    }
    //console.log(checkduplicates.length);
}
}

嘿，我在draw函数内部声明了drawOne函数，这样内部函数drawOne就可以访问局部变量checkduplicates。然而，在drawOne函数运行16次之后，数组checkduplicates应该填充了对象，这由drawOne内部的console.log证明，显示数组中有16个对象。然而，我用“问题”标记的 console.log 函数显示该数组只有第一个对象，而其他 console.logs 显示该数组充满了对象。我不明白为什么，因为修改数组的唯一方法是通过“push”方法，该方法已被调用 16 次，如果我注释掉 img.onload 部分，带有注释“problem”的 console.log 将显示该数组充满了物体。为了简单起见，我故意省略了其他代码，并且我的萤火虫不会抱怨错误。谢谢

Answer 1

当您使用异步递归时，对 drawOne 的初始调用将在第一次迭代后返回。当第一个图像加载后，以及当您退出 draw 函数以便浏览器重新获得控制权以便能够处理事件时，迭代将继续。

因此，数组在第一次迭代后仅包含单个项目根本不是问题，这是您使用的迭代方法的预期结果。