如何在没有回调地狱的情况下加载图像？

Posted 2023-02-19

【中文标题】如何在没有回调地狱的情况下加载图像？

【英文标题】：How to load Images without callback hell?

【发布时间】：2018-06-26 06:50:05

【问题描述】：

我正在尝试加载几个 SVG vie Fabric.js 并将它们推送到一个数组中，以便将来访问它们。 我有这个小功能，可以将图片“推送”到数组中。一切正常，但是，因为异步加载，我并没有真正控制特定图片在数组中的位置。 我试图弄清楚，如何使用回调来等待下一张图片加载，但这以一个很长而且不是很灵活的程序结束。 必须有一个更简单的解决方案。你能给我一个提示吗？

这是目前为止的功能：

var axles=[];

makeMySvg('holes.svg', 100, 100, changescale);



function makeMySvg(urlName, posx, posy, callback)

    fabric.loadSVGFromURL(urlName,

    function(objects)
    

            var obj = new fabric.util.groupSVGElements(objects, 
              top: posx,
              left:posy,
              opacity: 1,
              scaleX: 1,
              scaleY: 1,
              objectCaching: true
            );

            canvas.add(obj);
            axles.push(obj);
            callback();

    );



function changescale()

  console.log(axles.length);
  canvas.renderAll();

【参考方案1】：

你可以使用promise和Promise.all来等待你所有的图片加载完毕：

var axles=[];

var images = ['hole1.svg', 'hole2.svg' ];
var promises = images.map(loadSVG);

Promise.all(promises).then(function(loadedImages) 
  var posx = 100, var posy = 100;
  loadedImages.forEach(function(img) 
    var obj = new fabric.util.groupSVGElements(img, 
      top: posx,
      left:posy,
      opacity: 1,
      scaleX: 1,
      scaleY: 1,
      objectCaching: true
    );  
    canvas.add(obj);
    axles.push(obj);
  );
  changescale();
);

makeMySvg('holes.svg', 100, 100, changescale);

loadSVG(img) 
  return new Promise(function(resolve) 
    fabric.loadSVGFromURL(urlName, function(objects) 
      resolve(objects);
    );
  );


function changescale()

  console.log(axles.length);
  canvas.renderAll();

【讨论】：

非常感谢。现在我不理解你的例子 100% 但我会深入研究它。 Promise 至少听起来很有希望。