在for循环中将变量传递给onload函数[duplicate]

This question already has an answer here:

这个问题在这里已有答案:

JavaScript closure inside loops – simple practical example 39 answers

内部循环中的JavaScript闭包 - 简单实用示例39答案

I have the following simple JavaScript that loads a bunch of images and places them on HTML canvas (canvasCTX is the 2D canvas context):

我有以下简单的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);
  };
}

Now the problem I find is that all the images are placed at the same place - the last variable created by the loop. I think that's because the for loop continues to run whilst images are being loaded, as the onload is an asynchronous event.

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

How do I make sure each image gets the correct placementX from it's turn in the for loop?

如何确保每个图像从for循环中获得正确的placementX?

3 个解决方案

#1

try this code .

试试这段代码。

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

Use a closure.

使用封闭物。

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

}

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

#1