查询。使用 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 数组，并计划使用它）。

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

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

我不是 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 并带有一个现有的promise 和一个新的promise，您将获得第三个promise，当两者都完成时将完成。这些可以按顺序链接在一起。

• 此快捷方式的缺点是传递给 done 的最终数据值比正常评估一组针对 done 的 Promise 时所期望的更为复杂。

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