jquery ajax - 維護ajax調用序列

-1

我知道我的問題被標記爲重複。但是給出的答案是使用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的順序???

來源

2014-08-29 Valay

我不需要替換內容。我需要一個接一個地追加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的值。

來源

2014-08-30 09:37:54 Sumurai8

你不能指望async ajax調用以調用順序結束。但是你可以將它包裝在一個函數中，該函數將元素作爲你可以在你的ajax回調中訪問的參數。

function fetchContent(element, url){ 

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

在您的代碼中，然後創建一個div或搜索一個存在的。並通過傳遞該元素作爲參數來調用您的fetchContent。即使您的ajax調用不按調用順序結束，也應將內容添加到良好的元素中。

我認爲它應該工作。

來源

2014-08-30 10:11:55

jquery ajax - 維護ajax調用序列

回答

相關問題