//STARS
var stars_arr = new Array(6);
for(a=0;a<6;a++){
fabric.Image.fromURL(
'./img/util/star.png',
function(output){
canvas.add(output);
stars_arr[a] = output;
},
{
left:75+(a*29),
top:30,
width:23,
height:25,
selectable:false
}
);
}
console.log(stars_arr);
我想将每个恒星图像对象推入一个数组,因为我将修改它们的一些繁荣。
但是控制台告诉我
[未定义,未定义,未定义,未定义,未定义,未定义]
和stars_arr.length = 0
最佳答案
您可能早就知道了这一点-但万一有人偶然发现:这里的问题是由于fabric.Image.fromURL是异步的。在执行任何回调函数之前,循环的所有迭代都已完成。因此,当它们最终执行时,您的a
变量已经是6,并且在所有6次迭代中都保持6。
解决此问题的最简单方法是将您的调用封装在从循环调用的函数中。如:
//STARS
var stars_arr = new Array(6);
for (a = 0; a < 6; a++)
addStar(a);
function addStar(a) {
fabric.Image.fromURL(
'./img/util/star.png',
function(output) {
canvas.add(output);
stars_arr[a] = output;
}, {
left: 75 + (a * 29),
top: 30,
width: 23,
height: 25,
selectable: false
});
}
这样做时,回调中对
a
的引用是指传递给函数的a
而不是a
循环变量-因此它保留了每次调用的值。