回调函数执行得太晚

Question

我正在使用 fabric.js 在 canvas 上渲染图像。尝试渲染 3 个具有不同属性（如本地化、来源等）的图像。

for (i = 0; i < 3; i++) {
  // read data from XML
  // ... read: imageWidth, imageHeight, etc.

  var imageDefaults = {
    width: imageWidth,
    height: imageHeight,
    left: imageX,
    top: canvas.height - imageY,
    angle: imageRotation
  };

  console.log('outside callback fun');

  fabric.Image.fromURL(imagePath, function (image) {
    image.set(imageDefaults).setCoords();                                    
    canvas.add(image);
    console.log('inside callback fun');                 
  });
}

输出控制台日志为：

outside callback fun
outside callback fun
outside callback fun
inside callback fun
inside callback fun
inside callback fun

因此，我收到了 3 张具有相同属性的图像（对于 i == 2）。

如何确保只在渲染图像时循环继续？我试图在渲染图像后设置while循环，但是这个循环是运行无限。

Answer 1

在 for 循环中添加一个包装函数。

for (i = 0; i < 3; i++) {
     (function(i){
      // read data from XML
      // ... read: imageWidth, imageHeight, etc.

      var imageDefaults = {
        width: imageWidth,
        height: imageHeight,
        left: imageX,
        top: canvas.height - imageY,
        angle: imageRotation
      };

      console.log('outside callback fun');

      fabric.Image.fromURL(imagePath, function (image) {
        image.set(imageDefaults).setCoords();                                    
        canvas.add(image);
        console.log('inside callback fun');                 
      });
     })(i);
    }

Answer 2

尝试递归解决方案：

function SetImageUrl(index, maxIndex, callback){
    ...

    var imageDefaults = {
      width: imageWidth,
      height: imageHeight,
      left: imageX,
      top: canvas.height - imageY,
      angle: imageRotation
    };

    console.log('outside callback fun');

    fabric.Image.fromURL(imagePath, function (image) {
      image.set(imageDefaults).setCoords();                                    
      canvas.add(image);
      console.log('inside callback fun');
      if(index < maxIndex){
           callback(index++, maxIndex, callback);
      }

  });
}

用法：

SetImageUrl(0, 3, SetImageUrl);

回调函数执行得太晚

Callback function executes too late

javascript

fabricjs