javascript - image.onLoad——在触发之前我应该​​如何保持数据可用？

Question

//Draw Icon
for (var i = 0; i < diagram.Children.length; i++) {
    if (diagram.Children[i].Icon != -1) {
        var myImage = new Image();

        myImage.xOffset = diagram.Children[i].Offset.X;
        myImage.yOffset = diagram.Children[i].Offset.Y;
        myImage.componentName = diagram.Children[i].Name;
        myImage.componentLevel = diagram.Level;
        myImage.componentID = diagram.ID;
        myImage.type = diagram.Type;

        myImage.onload = function () {
            var self = this;
            var iconImage = new Kinetic.Image({
                image: self,
                x: self.xOffset,
                y: self.yOffset,
                tooltip: CreateTooltip(self.componentName, self.componentID, self.type),
                componentLevel: self.componentLevel,
                componentID: self.componentID
            });

            _stage.diagramLayer.add(iconImage);
            _stage.diagramLayer.draw();
        }

        //TODO: IE8+ doesn't support data URI's unless they are defined in css. 
        //myImage.src = 'data:image/png;base64,' + diagram.Children[i].Icon;
        myImage.src = '../PlanView/RenderIcon?IconID=' + diagram.Children[i].Icon;
    }
}

在加载图像之前必须将我的数据存储为图像的属性，以便只能在“onload”事件期间访问这些属性，这似乎违反直觉。但我没能找到替代方案。我想知道是否有人有任何想法。谢谢。

Answer 1

变量在范围内。问题是 i (以及循环内重新分配的任何其他变量)将在事件触发之前发生变化。如果您只需将该代码提取到一个函数中，问题就解决了。

for (var i = 0; i < diagram.Children.length; i++) {
    if (diagram.Children[i].Icon != -1) {

        doImageStuff(diagram, i);
    }
}

...

function doImageStuff(diagram, i){
        var myImage = new Image();

        var xOffset = diagram.Children[i].Offset.X;

        /* etc. */

        myImage.onload = function () {
            // do stuff and use variables such as xOffset here
        }
}

这样，函数中的 i 就不会随着循环的继续而改变。

<小时/>

编辑:解决评论中有关匿名函数的问题。你可以做这样的事情，尽管我发现它有点困惑:

for (var i = 0; i < diagram.Children.length; i++) {
    if (diagram.Children[i].Icon != -1) {

        (function(diagram, i){
            var myImage = new Image();

            var xOffset = diagram.Children[i].Offset.X;

            /* etc. */

            myImage.onload = function () {
                // do stuff and use variables such as xOffset here
            }
        })(diagram, i);
    }
}

还有其他替代方案，我发现它们更困惑，例如返回函数的匿名函数。

myImage.onload = (function (diagram, i) {
                     return function(){
                         // do stuff here using the variables
                     }
                 })(diagram, i);