再帰的なajaxを追加/複製する方法は重複を追加しますか？

Question

現在、純粋なJS/Jqueryアプリケーションを開発中で、問題が発生しました。

シナリオ IDの配列を持つクラスがあります。また、Parse.comデータベースへのAjax呼び出しを使用して構築します。ビルドしたら、<div>リストにいくつかのデータ（Id、Name、...）を追加し、配列のIDがなくなるまでリストの新しいIDをポップして呼び出します。結果は、すべてのビルドオブジェクトのリストを含むDIVです。ここで

は、クラスは

function classSomething(ListOfIds,...){ 
var aListId= ListOfIds.pop(); 
$.ajax({ 
    url: '<secret URL to Parse Database>' + aListId, 
    dataType: 'json', 
    async : true, 
    success: function(response) { 

     this.id = response.id; 
     this.name = response.name; 
     this.address = response.Address; 

     ... 

     var innerHTML = '<li><div class="aclassObject">'+ this.id + ... + '</div></li>'; 

     $('#TheList').append(innerHTML) 

     if(ListOfIds.length >0){ 
       new classSomething(ListOfIds,...) 
     } 

    } 
} 

擬似コードである問題 問題は、リストは時々の要素が重複していることです。残念ながら、私はJSをデバッグするとき、100％完全に動作しますが、正常に実行されると "ランダム"の重複があります。

Answer 1

すべての重複を削除して、各再帰呼び出しがidsのユニーク配列を持つようにしてください。あなたは、私が入れて、問題を解決するかどうかを確認するフィルタ式をつかむことができますが、私の推測では、すべての呼び出しの非同期の性質が問題を作成しているということです。

しかし、ajax呼び出しで返される時間がもう少し長くかかる場合はどうなりますか？それはすべて非同期であるため、IDのないものを送信することはできますが、前のものを返すことで、それを返すことになります。おそらく、アイデアを発するための擬似コードがあります。

function request(id) {  

    // return the AJAX promise 
    return $.ajax({ 
     url: '<secret URL to Parse Database>' + id, 
     dataType: 'json', 
     async : true 
    }); 
} 

function sendTheRequest(ids,....) { 
    // you probably don't need this filter if you go the promise route 
    const id = ids.filter(function(item, pos) { 
       return ids.indexOf(item) == pos; 
       }) 
     return request(id).then(function(response){ 
      // deal with your returned data 
      // conditional. if still 'ids', do recursive, call again 
       if(ids.length) sendTheRequest(ids,...) 
     }); 
} 

function putAllIds(ids){ 
    return sendTheRequest(ids); 
} 

putAllIds().done(function(res) { 
    console.log(res); 
}