canvas绘图引起的闭包问题

在stackflow上有一个关于js闭包的问题，可以通过该链接查看：http://stackoverflow.com/questions/7880168/not-showing-images-in-a-html5-canvas-javascript
可是我在试验提问者提问的问题时，发现结果和提问者描述的不一样
提问者原代码：

for (var i=1;i<9;i++){
    for (var j=1;j<9;j++){
        var img=new Image();
        img.onload=function(){
                ctx.drawImage(img,p+sqs*(i-1)+(sqs-32)/2,p+bds-sqs*j+(sqs-32)/2,32,32);
        };
        img.src="img/"+squares[i][j]+".png";
        //alert(img.src);
    }
}

依提问者描述，他加上那个alert语句后就可以正常显示图片，可是我测试的时候，加上alert语句后依然没有显示图片
PS：因为作者代码不全，所以在测试的时候，我将ctx.drawImage(img,p+sqs*(i-1)+(sqs-32)/2,p+bds-sqs*j+(sqs-32)/2,32,32);修改为ctx.drawImage(img,i*5,j*5);
另：ITeye的论坛规则真变态啊
补充我的测试结果：
  使用chrome浏览器，发现进入循环后，首先执行img.src的赋值语句，执行8*8后，进入img.onload函数，图片展示不全
  加上那条alert语句后，结果同上，没有出现原提问者所说的图片可以展示的情况

评论

2 楼 chairmanMao 2012-06-13  

simplemx 写道

感觉加和不加不会有影响，这个是闭包的问题。

img.onload=(function(i){
return function(){  
                ctx.drawImage(img,p+sqs*(i-1)+(sqs-32)/2,p+bds-sqs*j+(sqs-32)/2,32,32);  
        };
})(i);

确实是闭包问题，我google过，是比较曲型的问题：在闭包中使用循环，可是依提问者说只要加个一个alert,就可以正常工作，我加了没反应啊

1 楼 simplemx 2012-06-12  

感觉加和不加不会有影响，这个是闭包的问题。

img.onload=(function(i){
return function(){  
                ctx.drawImage(img,p+sqs*(i-1)+(sqs-32)/2,p+bds-sqs*j+(sqs-32)/2,32,32);  
        };
})(i);