以不发送同步请求的相同顺序显示AJAX响应 [英] Displaying AJAX responses in the same order they were sent out without using synchronous requests

问题描述

我正在发送多个getJSON请求，在每个请求之后，我将构建一个面板，并使用数据初始化一个第三方层次结构网格.我遇到的问题是，不是按照发送请求的顺序来创建面板，而是按照它们返回的顺序来创建面板.我想我已经将自己挖掘成一个整体，但是如果不需要，我真的不想重新设计它.

I'm sending out multiple getJSON requests, and after each request I build out a panel and initialize a 3rd party hierarchical grid with the data. The problem I'm having is that panels aren't being created in the order the requests are sent out but in the order they come back. I think I've dug myself into a whole but I really don't want to have to re-engineer this if I don't have to.

var _grids = {
        ServiceGrid: {
            id: 0,
            parentUrl: _SERVICE_CONTENT_URL,
            childUrl: _SERVICE_HISTORY_URL,
            parentElementName: "ServiceTypeName",
            childElementName: "ServiceLogEntries",
            childPrimaryKey: "LogID",
            tableName: "Service",
            data: [],
            parentColumns: [...],
            childColumns: [...]
        },
        ServiceItemGrid: {
            id: 1,
            parentUrl: _SERVICE_ITEM_CONTENT_URL,
            childUrl: _SERVICE_ITEM_HISTORY_URL,
            parentElementName: "PackageServiceItemName",
            childElementName: "ServiceItemLogEntries",
            childPrimaryKey: "LogID",
            tableName: "Service Item",
            data: [],
            parentColumns: [...],
            childColumns: [...]
        }
    };

function prepareDataForGrid(_grids, id) {
    var tableIdIncrementor = 0;
    var $panelGroup = $("<div>").addClass("panel-group");

    // Append Accordion
    $panelGroup.attr("id", "accordion");
    $panelGroup.appendTo("#placeholder");


    $.each(_grids, function(index, grid) {
        var parentUrl = grid.parentUrl,
            childUrl = grid.childUrl,
            //Request data
            parentData = getApiDataAjax(parentUrl, id),
            childData = getApiDataAjax(childUrl, id);

        $.when(parentData, childData).done(function (parentDataResult, childDataResult) {
            //Combine child to parent
            combineElements(parentDataResult[0], childDataResult[0], grid);
            // Hydrate grid.data with combined data
            grid.data = parentDataResult[0];

            //loop through grids, build panels for each parent
            $.each(grid.data.result, function(index, value) {

                appendhtml(grid, value, tableIdIncrementor);

                //Create hierarchical grid  
                $("#" + tableIdIncrementor).igHierarchicalGrid({
                    initialDataBindDepth: 1,
                    dataSource: JSON.stringify(value),
                    dataSourceType: "json",
                    responseDataKey: "result",
                    autoGenerateColumns: false,
                    primaryKey: "ID",
                    columns: grid.parentColumns,
                    autoGenerateLayouts: false,
                    defaultChildrenDataProperty: value[grid.childElementName],
                    columnLayouts: [
                        {
                            key: grid.childElementName,
                            autoGenerateColumns: false,
                            primaryKey: value.childPrimaryKey,
                            columns: grid.childColumns
                        }
                    ]
                });

                tableIdIncrementor++;
            });
        });
    });
}

我可以先制作所有面板，然后通过id将网格附加到面板上，但是如果我可以按发送请求的顺序附加面板和网格，则要简单得多.

I could possibly make all the panels first and attach the grids to the panels via id's but it would be so much simpler if I could append panels and grids in the order the requests where sent out.

谢谢.

推荐答案

一种简单的解决方案是在循环时创建div并将其附加到目标div，然后在数据到达时将数据插入到每个div中. /p>

One simple solution would be to create and append a div to the target div while you're looping, then insert data into each div as the data arrives.

$.each(function () {
    var $thisDiv = $("<div>").appendTo("#targetDiv");
    $.when(doThis,doThat).done(function (result1, result2) {
        $thisDiv.append(result1).append(result2);
    });
});

尽管如此，我宁愿预先构建html结构并一次插入所有内容，只是因为我希望尽可能少地触摸dom.

Though, I would prefer building the html structure beforehand and inserting all at once, just because I prefer to touch the dom as little as possible.

这篇关于以不发送同步请求的相同顺序显示AJAX响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！