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显示数组充满了对象。为了简单起见，我故意省略了其他代码，而我的firebug并没有抱怨bug。谢谢

Answer 1

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

因此，在第一次迭代完全没有问题之后，数组只包含一个项目，这是您使用的迭代方法的预期结果。

数组无法填充

1 个答案: