jQuery的。 使用ajax调用在.each循环之后调用函数

Question

我已经在网上搜索了几个小时，我知道我可能必须对延迟的对象做些事情，但是我做不到。

首先，这是我的代码：

$('#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和准备数据之后进行该操作）将创建另一个实体，该实体将与创建的实体相关对于.panel DIV（我将所有这些数据推送到ajaxes数组，并计划在leter上使用它）。

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

我试图对结尾的所有ajax调用（$ .ajax（）。promise（）。done）做出一个承诺（对于这种技术我是很新的），但是id似乎不起作用。 有时，promise中的console.log在末尾，有时在开始时触发。

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

谢谢。

Answer 1

您将使用promise数组获得答案，并使用针对$.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有一个现有的承诺和一个新的承诺，您将获得第三个承诺，这两个承诺都将完成。 这些可以按顺序链接在一起。

• 这种捷径的缺点是，传递给完成的最终数据值要比对done的承诺数组进行常规评估所期望的要复杂得多。

当我只需要知道整体完成而不是所有单独的数据/结果时，我会优先使用promise数组而不是promise数组。 它使代码简单得多，额外promise的开销很小。 它也适用于动画集。