jquery ajax - 维护ajax调用序列

问题描述：

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

我不需要更换内容。我需要依次追加svg。

我在div中追加5 svg元素。所有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的顺序???

我不需要替换内容。我需要一个接一个地追加svgs。 – Valay 2014-08-29 08:50:03

重读重复。这正是重复试图解决的问题。 – Sumurai8 2014-08-29 10:17:32

我不想通过async：false强制同步ajax调用。 – Valay 2014-08-30 05:40:20

答

您可以使用async: false来模拟您尝试使用延迟的内容。既然你知道在调用你的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的值。

答

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

function fetchContent(element, url){ 

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

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

我认为它应该工作。

jquery ajax - 维护ajax调用序列

相关推荐