$。每个.getJSON竞争条件？

Question

在jquery.getJSON中使用jquery.each()函数时出现问题。 在这种情况下，我在代码中处理的元素有两种类型。 “Sources”和“Streams” 我想使用getJSON首先获取源代码，对它们进行迭代并生成手风琴标头。然后，对于这些“来源”中的每一个，我再次使用getJSON与该来源的ID来获取它的相应“流”。然后，我将这些流添加到它的源手风琴体中，以获取所有流的列表，并根据它们的来源进行排序。

但是，当我得到JSON时，我的过程中的下一个语句已经被执行。由于我基本上是动态构建一个大的HTML字符串并使用jQuery将其添加到元素，因此字符串不会获取所需的所有数据。

的代码如下：

var html1 = "<div class='panel-group' id='manageAccordion'>"; 
$.getJSON(url, function(data){ 
    $.each(data, function(i, json){ 
     html1 += getAccordionPart(...); //creates the accordion for the given source 
    }); 

}).done(function(){ 
    html1 += "</div>"; 
    $('#elementList').html(html); 
}); 

function getAccordionPart(id, parent, count, json){ 
    //new string html2 is created and a bunch of stuff added 
    //... 
    html2 += "...."; 
    html2 += getAccordionBody(json); 
    html2 += "</div></div></div></div>"; 
    return html2 
} 

function getAccordionBody(json){ 
//new string "html3" gets created 
//... 

var url = standardUrl + "sources/" + encodeURIComponent(json.elementId) + "/streams"; 
$.getJSON(url, function(data) { 
    $.each(data, function(i, json) { 
     html3 += "<li class='list-group-item'>"; 
     html3 += json.name; 
     html3 += "</li>"; 
    }); 

}).done(function(){ 
    html3 += "</ul>"; 
    return html3; 
}); 

}

我专门与最终是手风琴标头，在它的身上， 因为它似乎是getAccordionBody()功能没有按”“不确定”在html字符串被添加到DOM之前返回。

我已经尝试过与async = false改变$.getJSON到$.ajax，在我的两个$.getJSON调用，这似乎解决了报表不我希望他们的顺序执行的问题，但它是可怕的缓慢和返回undefined无论如何由于某种原因..

有什么建议吗？ 我错过了一些真正愚蠢的东西吗？

Answer 1

似乎getAccordionBody（）函数之前的HTML字符串被添加到DOM

这是正确的不会返回。你的方式returning the response (html3) from ajax是有缺陷的 - 你不能从done处理程序return。

但是，您可以通过使用承诺来解决此问题。每个函数返回一个承诺，使他们很容易链接，并then来转换数据，并得到一个新的承诺：

$.getJSON(url).then(function(data){ 
    return $.when.apply($, $.map(data, function(i, json){ 
     return getAccordionPart(…); //creates the accordion for the given source 
    }).then(function() { 
     var html1 = "<div class='panel-group' id='manageAccordion'>"; 
     html1 += Array.prototype.join.call(arguments, "\n"); 
     html1 += "</div>"; 
     return html1; 
    }); 
}).done(function(html){ 
    $('#elementList').html(html); 
}); 

function getAccordionPart(id, parent, count, json){ 
    return getAccordionBody(json).then(function(result) { 
     var html2 = "…"; //new string html2 is created and a bunch of stuff added 
     html2 += result; 
     html2 += "</div></div></div></div>"; 
     return html2; 
    }); 
} 

function getAccordionBody(json) { 
    var url = standardUrl + "sources/" + encodeURIComponent(json.elementId) + "/streams"; 
    return $.getJSON(url).then(function(data) { 
     var html3 = "…"; //new string "html3" gets created 
     $.each(data, function(i, json) { 
      html3 += "<li class='list-group-item'>"; 
      html3 += json.name; 
      html3 += "</li>"; 
     }); 
     html3 += "</ul>"; 
     return html3; 
    }); 
} 

Answer 2

与其使用同步呼叫，您可以使用延迟/承诺模式 - http://api.jquery.com/deferred.promise/。

• 您将需要从生成手风琴函数返回承诺。
• 您需要排队生成手风琴函数调用。
• 然后在解决承诺时按顺序执行附加业务。

Answer 3

你必须先收集这是需要“getAccordionPart”和“一切getAccordionBody“（例如：encodeURIComponent（json.elementId））全局数组中。例如：

var arrIds = []; 

$.getJSON(url, function(data){ 
$.each(data, function(i, json){ 
    arrIds.push(encodeURIComponent(json.elementId))//collect everything which is required for "getAccordionPart" and "getAccordionBody" 
}); 

然后迭代此集合并收集这些ids在所有全局变量中的所有数据。

var bodyData = {}; 
$.each(arrIds, function(){ 
var url = standardUrl + "sources/" + this + "/streams"; 
$.getJSON(url, function(data) { 
    bodyData[this] = data;//collect all the Data for accordian body of these ids 
}}); 

而且做getAccordionPart像痘痘变化：

function getAccordionPart(id, parent, count, /*json*/ elementId){ 
//new string html2 is created and a bunch of stuff added 
//... 
html2 += "...."; 
html2 += getAccordionBody(elementId); 
html2 += "</div></div></div></div>"; 
return html2 
} 

也改变getAccordionBody像：

function getAccordionBody(/*json*/ elementId){ 
//new string "html3" gets created 
//... 

var data = bodyData[elementId]; 
    $.each(data, function(i, json) { 
     html3 += "<li class='list-group-item'>"; 
     html3 += json.name; 
     html3 += "</li>"; 
    }); 
html3 += "</ul>"; 
    return html3; 
} 

您的电话也随之发生变化：

$.each(arrIds , function(){ 
    html1 += getAccordionPart(,,,this); //creates the accordion for the given source 
}); 

你最终的代码将是l是：

var arrIds = []; 

$.getJSON(url, function(data){ 
$.each(data, function(i, json){ 
    arrIds.push(encodeURIComponent(json.elementId))//collect everything which is required for "getAccordionPart" and "getAccordionBody" 
}); 

var bodyData = {}; 
$.each(arrIds, function(){ 
var url = standardUrl + "sources/" + this + "/streams"; 
$.getJSON(url, function(data) { 
    bodyData[this] = data;//collect all the Data for accordian body of these ids 
}}); 

function getAccordionPart(id, parent, count, /*json*/ elementId){ 
    //new string html2 is created and a bunch of stuff added 
    //... 
    html2 += "...."; 
    html2 += getAccordionBody(elementId); 
    html2 += "</div></div></div></div>"; 
    return html2 
    } 

function getAccordionBody(/*json*/ elementId){ 
//new string "html3" gets created 
//... 

var data = bodyData[elementId]; 
    $.each(data, function(i, json) { 
     html3 += "<li class='list-group-item'>"; 
     html3 += json.name; 
     html3 += "</li>"; 
    }); 
html3 += "</ul>"; 
    return html3; 
} 

$.each(arrIds , function(){ 
    html1 += getAccordionPart(,,,this); //creates the accordion for the given source 
});