Question

我知道我的问题被标记为重复。但是给出的答案是使用async:false。我不想强制同步请求。如何维护异步ajax调用序列???

我不需要更换内容。我需要在一个序列中依次附加svg。

我在svg中添加了5个div个元素。所有svgs都是ajax来电的。问题是那些svgs的顺序。每次他们以不同的顺序附加。我想维持他们的秩序。请在下面找到我的代码：

    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调用附加的svgs的顺序???

Answer 1

您可以使用async: false来模仿您尝试使用Deferred做的事情。由于您在调用ajax请求时知道订单，因此使用占位符the duplicate question（由于某种原因，他们重新打开了这个...）建议是您最好的选择。

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 );
  } );
}

函数insertFlag(..)是必需的，因为您需要复制i的值。

Answer 2

您不能指望异步ajax呼叫按呼叫顺序结束。但是你可以将它包装在一个函数中，该函数将元素作为参数，你可以在你的ajax回调中访问它。

function fetchContent(element, url){

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

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

我认为它应该有用。

jquery ajax - 维护ajax调用序列

2 个答案: