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（およびループ内で再割り当てされた他の変数）がイベントの発生前に変更されることです。そのコードを関数に取り込むだけで、問題は解決されます。

このように、ループが続行されると、関数内のiは変更されません。

---

EDIT：匿名関数についてのコメントで質問に対処するために。私はそれが少し厄介見つけるのにあなたは、このような何かを行うことができます：

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); 
    } 
} 

は、このような関数を返す無名関数として、私もメシエ見つける他の選択肢は、もあります。