javascript - 使用 for 循环和 on.load 事件监听器进行流程控制

Question

我正在迭代图像数组并将它们绘制在 Canvas 上。问题是图像首先从服务器下载，所以我需要等到它们完全加载后再尝试绘制它们。听起来很简单，但我在控制流程方面遇到了困难。我在下面编写了一个示例片段来演示:

var drawImages = function(myArray) {
    for (var i = 0; i < myArray.length; i++) {
        console.log("1");
        $(imageObj).on('load', function(){
            //draw image
            console.log("2");
        });
        console.log("3");
    }
}

当我运行此代码时，控制台输出如下:

1
3
2

这是有道理的，因为“2”发生在图像完全加载之后。但我需要它按顺序发生。

问题似乎是 for 循环并不关心，直到 on.load 事件完成后再继续下一次迭代。因此，如果数组中有多个图像，则输出变为:

1
3
1
3
//image finishes loading...
2

有没有办法让迭代停止直到图像加载？还是我的处理方式完全错误？

Answer 1

如果您的数组包含图像 URL，并且您希望在加载图像时绘制图像，那么您所拥有的就可以了。只需创建图像元素，并在其上设置监听器，例如:

var drawImages = function(myArray) {
  var image;

  for (var i = 0; i < myArray.length; i++) {
    image = new Image();
    $('#hidden-loader-div').append(image);
    $(image).on('load', function(){
        //draw image
        console.log("2");
    });
    // Start the loading process
    image.src = myArray[i];
  }
}

每当图像加载时，加载函数就会触发。只要确保有一个 <div>您可以将这些图像粘贴到的某个地方。它不一定是可见的。