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