数组无法填充

时间:2011-04-18 23:51:44

标签: javascript canvas

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。谢谢

1 个答案:

答案 0 :(得分:2)

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

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