Question

编辑：此网站的善意人士将我与QA相关联，该问答似乎与下述问题有关。

JavaScript closure inside loops – simple practical example

虽然我很欣赏快速响应，并且我能理解防止重复内容的必要性，但它让我陷入困境 - 我不够精明，无法理解如何重新利用链接的答案来解决我的特定问题。

我已经将问题修改为更具体 - 请考虑帮助我纠正我这次缺乏经验，而不是让我自己照顾自己。

处理一个应用程序（阅读：游戏），并遇到了我确定的常见问题。我有一个将异步加载的资产列表，每个资产都需要在创建后引用特定对象。

见下面的代码。加载图片时，应创建Kinetic.Image对象并将其关联回具有正确图片网址的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;
        }
    }
};

Answer 1

这基本上就是他们的建议：

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是其当时的值，而不是在定义函数时。使用函数隔离敌人和eImg并在函数对象内关闭它们。

如何使用＆＃34;关闭＆＃34;异步分配对象？

1 个答案: