如何调试/解决递归 AJAX 追加重复项

Question

我目前正在开发一个纯JS/Jquery应用程序，遇到了一个问题。

场景我们有一个接受 ID 数组的类。并通过对 Parse.com 数据库的 Ajax 调用来构建自身。构建后，它会将一些数据（Id，Name等）附加到<div>列表中，弹出列表的新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

尝试这样的事情，删除所有重复项，以便每个递归调用都有一个 uniq ID 数组。您可以抓住我放置的过滤器表达式，看看是否可以解决问题，但我的猜测是所有调用的异步性质是造成问题的原因。

但是，如果一个 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);
}