在for循环中将变量传递给onload函数[重复]答案

【问题标题】：Passing a variable to onload function within a for loop [duplicate]在for循环中将变量传递给onload函数[重复]
【发布时间】：2014-05-17 01:03:15
【问题描述】：

我有以下简单的 JavaScript 加载一堆图像并将它们放置在 HTML 画布上（canvasCTX 是 2D 画布上下文）：

for (var i=0 ;i<10; i++) {   
  var placementX = i*25;
  var imageObj = new Image();
  imageObj.src = 'assets/png/' + i + '.png';
  imageObj.onload = function() {
    canvasCtx.drawImage(imageObj,placementX,0);
  };
}

现在我发现的问题是所有图像都放在同一个地方 - 循环创建的最后一个变量。我认为这是因为加载图像时 for 循环会继续运行，因为 onload 是一个异步事件。

如何确保每张图片都从for loop 中得到正确的placementX？

【问题讨论】：

标签： javascript html canvas for-loop

【解决方案1】：

试试这个代码。

function draw(placementX , imagePath)
{

  var image = document.createElement("img");
  image.src=imagePath;        
  console.log(placementX , "before loading");//to ensure that x befor image loading is the same after loading

  image.onload=(function()
  { 
                canvas.drawImage(image , placementX  , 0);
                console.log(placementX , " after loading");//to ensure that x befor image loading is the same after loading

  });
}

var placementX =0;

for (var i=0 ;i<10; i++) 
{   
     placementX = i*25;
     draw('assets/png/' + i + '.png' , placementX );

}

【讨论】：

【解决方案2】：

使用闭包。

for (var i=0 ;i < 10; i++) {   
    (function(x){
        var placementX = x*25;
        var imageObj = new Image();
        imageObj.src = 'assets/png/' + x + '.png';
        imageObj.onload = function() {
        canvasCtx.drawImage(imageObj,placementX,0);
        };
    })(i);

}

【讨论】：

由于某种原因无法使此方法起作用，尽管我确实找到了解决方案，方法是将 onload 放在单独的函数中并在 for 循环中调用它，同时将相关变量发送给它时间。我想知道这种方法是否试图达到同样的效果。
这个建议的方法可以工作，但不如在循环外定义单个函数并根据需要从内部调用它。

【解决方案3】：

    var i=0
    function update_image()
    { if(i<10)
    {   
          var placementX = i*25;
          var imageObj = new Image();
          imageObj.src = 'assets/png/' + i + '.png';
          imageObj.onload = function() {
            canvasCtx.drawImage(imageObj,placementX,0);
           i++;
    update_image();
          }
        }
update_image();

【讨论】：