编辑:这个网站的人把我链接到一个似乎与下面描述的问题有关的QA。
JavaScript闭包内循环-简单的实际例子
虽然我很感激你的及时回复,而且我能理解防止重复内容的需要,但这让我陷入了一个困境——我不够聪明,不知道如何重新利用链接的答案来解决我的特定问题。
我已经把问题修改得更具体了——这次请考虑帮我纠正我的经验不足,而不是让我自生自弃。
在一个应用程序(阅读:游戏),并遇到了我确信是一个常见的问题。我有一个将被异步加载的资产列表,每一个都需要引用一个特定的对象。
见下面的代码。当图像加载时,它应该创建一个Kinetic.Image
对象,并将其关联回具有正确图像URL的this.enemies[n]
。this.enemies
是基数,资产/对象需要保持在这个顺序-所以我不能只是把对象推到一个数组,因为他们被创建。这个列表也是变长的,所以我不能硬编码。我甚至尝试在绝望的行为中引用循环中的i
,并且(不足为奇)它不起作用。
我试着用谷歌搜索"异步分配"之类的东西,但没有多大成功。这里的问题-当2.png
加载并创建其对象时,我如何使用闭包将其分配给包含asset: "2.png"
的对象?我明白链接的问题是相关的,但它没有说如何在处理异步加载时执行它。
代码如下:
var Battle = {
...
start: function(){
this.enemies = [
{ asset: "1.png" },
{ asset: "2.png" },
{ asset: "3.png" }
];
for(i in this.enemies){
var eImg = new Image();
eImg.onload = function(){
Battle.enemies[i].obj = new Kinetic.Image({
image: eImg,
x: 40, y: 40
});
};
eImg.src = "/game/assets/battle/"+this.enemies[i].asset;
}
}
};
这基本上就是他们的建议:
function makeCallback(enemy, eImg) {
enemy.obj = new Kinetic.Image({
image: eImg,
x: 40, y: 40
});
}
var Battle = {
...
start: function(){
this.enemies = [
{ asset: "1.png" },
{ asset: "2.png" },
{ asset: "3.png" }
];
for(i in this.enemies){
var eImg = new Image();
eImg.onload = makeCallback(this.enemies[i], eImg);
eImg.src = "/game/assets/battle/"+this.enemies[i].asset;
}
}
};
在你的代码中,当函数执行时,i
是它当时的值,而不是函数定义时的值。使用一个函数来隔离敌人和敌人,并在函数对象内关闭它们。