jQuery的。(Jquery. Calling a function after .each loop with ajax calls)

jQuery的。(Jquery. Calling a function after .each loop with ajax calls)

我一直在网上搜索几个小时，我知道我可能要对延迟对象做些什么，但我无法完成它。

首先，这是我的代码：

$('#uploadButton').on('click', function () { //some preparation stuff (deleted) var panels = boxesContainer.find('.panel'); var ajaxes = []; $.each(panels, function (index, panel) { //more preparation + declaration of variables function getIdAndPrepareData() { $.when( $.ajax({ type: 'POST', url: 'url', data: { 'title': name } })) .done(function (result, textStatus, jqXHR) { if (result.success) { var id = result.id; } else { getIdAndPrepareData(); } console.log('Created Id: ' + id); $.each(panelForms, function (index, form) { var filesInput = //again, prep and vars $.each($(filesInput)[0].files, function (index, file) { var formData = new FormData(); formData.append('file', file); //more stuff ajaxes.push({ 'formData': formData, 'file': file }); }); }); }).fail(function () { getIdAndPrepareData(); }); } getIdAndPrepareData(); }); $.ajax().promise().done(function () { console.log('bla bla bla'); }); });

所以，基本上，我正在遍历某些DIV（.panels）并通过ajax为它们创建一个新的数据库实体。 然后我准备在所有循环完成后通过ajax将数据发送到服务器。 我需要在使用ajax的所有循环之后发送此数据，因为下一个ajax调用（我计划在迭代.panels和准备数据之后进行调用）将创建另一个与创建的实体相关的实体for .panel DIV（我将所有这些数据推送到ajaxes数组，并计划使用它）。

我在面板循环中使用jQuerys延迟对象，以获取新创建的面板ID，并将其保存在ajaxes数组中。 但我不知道如何在面板循环后执行任何代码。

我试图对最后的所有ajax调用（$ .ajax（）。promise（）。done）做出一个承诺（我对这种技术很陌生），但是id似乎不起作用。 有时，promise中的console.log会在最后触发，有时会在开头触发。

我不是jQuery和JS的专家，所以我想问一些解释如何在循环中使用异步ajax调用，在这种情况下该怎么做？ 在准备好所有数据之后，我想在最后执行一些代码。

谢谢。

I've been searching online for hours and I know that I probably have to do something with the deferred objects, but I can't get it done.

Firstly, here is my code:

$('#uploadButton').on('click', function () { //some preparation stuff (deleted) var panels = boxesContainer.find('.panel'); var ajaxes = []; $.each(panels, function (index, panel) { //more preparation + declaration of variables function getIdAndPrepareData() { $.when( $.ajax({ type: 'POST', url: 'url', data: { 'title': name } })) .done(function (result, textStatus, jqXHR) { if (result.success) { var id = result.id; } else { getIdAndPrepareData(); } console.log('Created Id: ' + id); $.each(panelForms, function (index, form) { var filesInput = //again, prep and vars $.each($(filesInput)[0].files, function (index, file) { var formData = new FormData(); formData.append('file', file); //more stuff ajaxes.push({ 'formData': formData, 'file': file }); }); }); }).fail(function () { getIdAndPrepareData(); }); } getIdAndPrepareData(); }); $.ajax().promise().done(function () { console.log('bla bla bla'); }); });

So, basically, I am looping through certain DIV's (.panels) and creating a new database entity via ajax for them. Then I am preparing data to be sent to server via ajax, after all the loops complete. And I need to send this data after all the loops with ajax, because the next ajax calls (that I am planning to make after the iterating through .panels and preparing data) are going to create another entities that will be related with the entities created for .panel DIV's ( I push all this data to ajaxes array, and plan to use it leter on ).

I am using jQuerys deferred objects inside panels loop in order to get the newly created ID of the panel, and hold it in the ajaxes array. But I do not know how to execute any code after the panels loop.

I tried to make a promise (I am quite new to this technique) for all ajax calls at the end ( $.ajax().promise().done ), but id doesn't seem to work. Sometimes the console.log in the promise, fires at the end, sometimes at the beginning.

I am not an expert in jQuery and JS, so I would like to ask for some explanations how to work with asynchronous ajax calls inside loops and what should I do in this situation? I want to execute some code at the end, after all the data is prepared.

Thank you.

最满意答案

您将使用promises数组获得答案，并使用$.when等的数组评估来评估它们，但是有一个方便的快捷方式，您可以链接$.when调用只需要一点点开销：

下面的伪代码：

var promise; // undefined is a resolved promise to $.when for (items in a loop){ promise = $.when(promise, $.ajax({...}); } promise.done(function(){ // All done });

笔记：

$.ajax返回一个承诺。 这个承诺是在完成数据或错误时给你回电话。

$.when当许多承诺完成时（或任何失败时）回$.when你

如果您使用现有承诺和新承诺调用$.when ，您将获得第三个承诺，这两个承诺将在两者完成时完成。 这些可以按顺序链接在一起。

这个快捷方式的缺点是传递给done的最终数据值更加复杂，通过正常评估一组承诺done 。

当我只需要知道整体完成而不是所有单独的数据/结果时，我使用这种技术，而不是承诺数组。 它使代码更简单，额外承诺的开销很小。 它也适用于动画集。

You will get answers using arrays of promises and evaluating them using array evaluation against $.when etc, but there is a handy shortcut where you can chain $.when calls with only a slight overhead:

Pseudo code below:

var promise; // undefined is a resolved promise to $.when for (items in a loop){ promise = $.when(promise, $.ajax({...}); } promise.done(function(){ // All done });

Notes:

$.ajax returns a promise. That promise is to call you back on completion with the data or an error.

$.when calls you back when a number of promises have completed (or when any fails)

If you call $.when with an existing promise and a new promise you get back a third promise that will complete when both are done. These can be chained together in sequence.

The downside of this shortcut is that the final data values passed to done are more complex that expected with normal evaluation of an array of promises against done.

I use this technique, in preference to arrays of promises, when I just need to know overall completion and not all the individual data/results. It makes for far simpler code and the overhead of the extra promises is minimal. It also works great with sets of animations.