Javascript jqueryajax-维护ajax调用序列

我知道我的问题被标记为重复。但是给出的答案是使用

async:false

。我不想强制同步请求。如何维护异步ajax调用序列？？？

---

我不需要替换内容。我需要按顺序依次追加

svg

。

我在

div

中添加了5个

svg

元素。所有SVG都是通过

ajax

call来的。问题是这些SVG的顺序。每次他们都以不同的顺序追加。我想维持他们的秩序。请在下面找到我的代码：

    FlagRow.DEFAULTS = {
                flagOrder: [
                        Enums.flagType.INDIA,
                        Enums.flagType.USA,
                        Enums.flagType.UK,
                        Enums.flagType.FRANCE,
                        Enums.flagType.GERMANY
                ]
            }
var container = $(document.createElement("div"));
    var topic = new Array();
            for (var key in this.options.flagOrder) {
                topic.push(this.options.flagOrder[key]);            
            } 

    var appendFlag = function (flag) {
                console.log(flag);
                var svgDiv = $(document.createElement("div"));
                $(svgDiv).addClass('svgDiv');

                var importedSVGRootElement = document.importNode(flag.documentElement, true);
                $(importedSVGRootElement).attr('viewBox', '0 0 100 125');

                svgDiv.append(importedSVGRootElement)
                container.append(svgDiv);                
            } 

    $.each(topic, function (i, val) {            
                $.when(//ajax call to get flag svg).done(function (flag ) { appendFlag(flag ); });
    });



     // api call to get flag svg
    var deferred = $.Deferred();
        $.ajax({
                        url: url,
                        type: 'get',
                        data: '',
                        dataType: 'xml',
                        timeout: 300000,
                        success: function (data) {                        
                            deferred.resolve(data);
                        },
                        error: function (e) {
                            console.log(':::error in flag:::', e);
                        },
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("Authorization", 'myapikey');                        
                        }
                    });

这里每次标记svg的顺序都不同。我希望它以

enum

的顺序显示它。所以我试着用

$.when（）.done（）

。但它是按照我的要求工作的

---

如何维护通过ajax调用追加的SVG的顺序？？？

您可以使用

async:false

来模拟您试图对延迟执行的操作。因为您知道调用ajax请求的顺序，所以使用占位符作为（出于某种原因，它们重新打开了这个…）是最好的选择

function getAllTheFlags() {
  for( var i = 0; i < 5; i++ ) {
    insertPlaceHolder( i ); //inserts <div id="placeholder-i"></div> at desired location
    insertFlag( i );
  }
}

function insertFlag( i ) {
  $.ajax( { ... } ).success( function( data ) {
    var svgDiv = $(document.createElement("div"));
    $(svgDiv).addClass('svgDiv');

    var importedSVGRootElement = document.importNode(flag.documentElement, true);
    $(importedSVGRootElement).attr('viewBox', '0 0 100 125');
    svgDiv.append(importedSVGRootElement)

    $( '#placeholder-' + i ).replaceWith( svgDiv );
  } );
}

函数getAllOffFlags（）{ 对于（变量i=0；i<5；i++）{ insertPlaceHolder（i）；//在所需位置插入 插入标志（i）； } } 函数insertFlag（i）{ $.ajax（{…}）.success（函数（数据）{ var svgDiv=$（document.createElement（“div”）； $（svgDiv）.addClass（'svgDiv'）； var importedsvgrootement=document.importNode（flag.documentElement，true）； $（importedsvgrootement）.attr（'viewBox'，'0100125'）； svgDiv.append（导入的svgrootement） $（'#占位符-'+i）.replace为（svgDiv）； } ); }

---

函数

insertFlag（..）

是必需的，因为您需要复制i的值。

您不能期望异步ajax调用按调用顺序结束。但是您可以将其封装在一个函数中，该函数将元素作为参数，您可以在ajax回调中访问该参数

function fetchContent(element, url){

    $.ajax({
        url: url,
        success: function(data) {
            element.whatever(...); 
        }
    });
}

然后在代码中创建一个div或搜索现有的div。并通过将该元素作为参数传递来调用fetchContent。即使ajax调用没有按调用顺序结束，也应该将内容添加到good元素中

---

我觉得应该可以用。

我不需要替换内容。我需要一个接一个地追加SVG。请重新阅读副本。这正是duplicate试图解决的问题。我不想通过async:false强制进行同步ajax调用。因为它们是异步的，所以它们没有按照定义的顺序进行