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 数组，并计划在字母上使用它）。

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

我试图在最后（ $.ajax().promise().done ）为所有 ajax 调用做出承诺（我对这项技术还很陌生），但是id 好像不行有时 promise 中的 console.log 会在最后触发，有时会在开头触发。

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

谢谢。

Answer 1

您将使用 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
});

备注：

$.ajaxreturns一个承诺。该承诺是在完成数据或错误时给您回电。
$.when 当多个 promise 完成时（或任何失败时）回调你
如果您使用现有承诺和新承诺调用 $.when，您会得到第三个承诺，当两者都完成时，该承诺将完成。这些可以按顺序链接在一起。
此快捷方式的缺点是传递给 done 的最终数据值比根据 done.

当我只需要知道整体完成情况而不是所有个人 data/results 时，我优先使用这种技术而不是承诺数组。它使代码简单得多，额外承诺的开销也很小。它也适用于动画集。

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

Jquery. Calling a function after .each loop with ajax calls

javascript

ajax

each

jquery

asynchronous

备注：