JavaScript异步Promise Resolve

Question

我面临的问题是控制从for循环调用的函数的执行。 示例代码如下。 我正在使用fabric.js加载一些图像。

    var xmlObj = '<objects>
    <gptimer onfile="gp_on.png" offfile="gp_off.png" x="9.590044" y="7.682292" onwidth="4.685212" onheight="8.333333" nameon="On Picture" offwidth="4.685212" offheight="8.333333" nameoff="Off Picture" name="GP Timer" channel="-1" fontz="10" font="Arial"></gptimer>
    <twoway onfile="twoway_on.png" offfile="twoway_off.png" x="22.547584" y="8.463542" onwidth="5.636896" onheight="3.906250" nameon="On Picture" offwidth="5.636896" offheight="3.906250" nameoff="Off Picture" device="Device" devicename="Two Way" name="Two Way"></twoway>
    <threeway onfile="twoway_on.png" offfile="twoway_off.png" x="36.456808" y="18.880208" onwidth="5.636896" onheight="3.906250" nameon="On Picture" offwidth="5.636896" offheight="3.906250" nameoff="Off Picture" device="Device" devicename="Three Way" name="Three Way"></threeway>
    <gpoverride onfile="gp_override_on.png" offfile="gp_override_off.png" x="49.853587" y="11.458333" onwidth="4.685212" onheight="5.208333" nameon="On Picture" offwidth="4.685212" offheight="5.208333" nameoff="Off Picture" name="GP Override" channel="-1" fontz="10" font="Arial" duration="30"></gpoverride>
    <slide pointer="slide.png" base="slide_base.png" x="64.641288" y="16.406250" onwidth="4.099561" onheight="4.427083" nameon="On SlidePicture" offwidth="3.367496" offheight="27.213542" nameoff="Off SlidePicture" device="Device" devicename="Slide" name="Slide"></slide>
</objects>'
function processXML()
{
    for (var i=0; i<xmlObj.children.length; i++) 
    {
        parseXMLObjectN(xmlObj.children[i]);

    }
}

function  parseXMLObjectN(xmlObject)
{
    var obj = xmlObject,
    elem = (obj.getAttribute('ONFILE')!=null ? 'images/'+obj.getAttribute('OFFFILE') : 'images/'+obj.getAttribute('base'));
    (
        function(o)
        {
            fabric.util.loadImage(elem, function (img)
                {
                    imgInstance = new fabric.Image(img);
                    imgInstance.set({
                    name: obj.getAttribute("NAME"),
                    rawURL: (obj.getAttribute('ONFILE')!=null ? 'images/'+obj.getAttribute('OFFFILE') : 'images/'+obj.getAttribute('base')),
                    left: getScreenX(obj.getAttribute("X")),
                    top:  getScreenY(obj.getAttribute("Y")),
                    order:'1'
                    });
                    fabricCanvas.add(imgInstance);
                });
                fabric.util.loadImage(elem, function (img)
                {
                    imgInstanceN= new fabric.Image(img);
                    imgInstanceN.set({
                    name: obj.getAttribute("NAME"),
                    rawURL: (obj.getAttribute('ONFILE')!=null ? 'images/'+obj.getAttribute('ONFILE') : 'images/'+obj.getAttribute('pointer')),
                    left: getScreenX(obj.getAttribute("X")),
                    top:  getScreenY(obj.getAttribute("Y")),
                    order:'2'
                    });

                    fabricCanvas.add(imgInstanceN);
                });

                var group = new fabric.Group();
                group.addWithUpdate(imgInstance);
                group.addWithUpdate(imgInstanceN);
                fabricCanvas.add(group);

                fabricCanvas.remove(imgInstance);
                fabricCanvas.remove(imgInstanceN);
        })(obj);
}

我需要先添加“ imgInstance”，然后再添加“ imgInstanceN”，然后再进行分组。 我无法控制子功能的循环和执行。 请通过更正代码来提供帮助。

Answer 1

我认为，如果您不想对代码进行少量修改，则可以对其进行一些修改。

因此，每个子代可以在不同的时间加载，因此可以执行base和pointer。

fabric.util.enlivenObjects可帮助您加载一堆对象。

只需准备要以织物对象形式加载的对象列表，然后将它们全部合并在一起，您将获得要添加到画布的图像实例的有序列表。

var processedElements = new Array(xmlObj.children.length * 2)
var xmlObj = '<objects>.... many children .....</objects>'
function processXML()
{

    for (var i=0; i< xmlObj.children.length; i++) 
    {
        parseXMLObjectN(xmlObj.children[i], i);
    }
    // now at the end of parseXML your processed element is a list of objects that  enlivenObjects can digest.
    fabric.util.enlivenObjects(processedElements, callback);
}

function callback(objects) {
  // objects here are 2 by 2 in order, your xml elements
  for (var i=0; i< objects.length; i+=2) {
    var g = new fabric.Group([objects[i], objects[i + 1]]);
    canvas.add(g);
  }
}

function  parseXMLObjectN(xmlObject, index)
{
    var obj = xmlObject,
    elem = (obj.getAttribute('ONFILE')!=null ? 'images/'+obj.getAttribute('OFFFILE') : 'images/'+obj.getAttribute('base'));
    processedElements[index * 2] = {
       type: 'image',
       src: elem,
       name: obj.getAttribute("NAME"),
       rawURL: (obj.getAttribute('ONFILE')!=null ? 'images/'+obj.getAttribute('OFFFILE') : 'images/'+obj.getAttribute('base')),
       left: getScreenX(obj.getAttribute("X")),
       top:  getScreenY(obj.getAttribute("Y")),
       order:'1'
    }
    processedElements[index * 2 + 1] = {
       type: 'image',
       src: elem,
       name: obj.getAttribute("NAME"),
       rawURL: (obj.getAttribute('ONFILE')!=null ? 'images/'+obj.getAttribute('ONFILE') : 'images/'+obj.getAttribute('pointer')),
       left: getScreenX(obj.getAttribute("X")),
       top:  getScreenY(obj.getAttribute("Y")),
       order:'2'
    }
}

您甚至可以做得更好，并直接使用base和指针创建组结构。

{
  type: 'group',
  objects: [{...base...}, {...pointer...}],
}

然后使小组活跃起来（然后不确定位置）