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和准备数据之后进行调用）将创建另一个与创建的实体相关的实体for .panel DIV（我将所有这些数据推送到ajaxes数组，并计划使用它）。

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

我试图对最后的所有ajax调用（$ .ajax（）。promise（）。done）做出一个承诺（我对这种技术很陌生），但是id似乎不起作用。有时，承诺中的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
});

说明：

$.ajax返回一个承诺。这个承诺是在完成数据或错误时给你回电。
$.when在许多承诺完成后（或任何失败时）回电给您回复
如果您使用现有承诺和新承诺致电$.when，您将获得第三个承诺，这两个承诺将在两者完成后完成。这些可以按顺序链接在一起。
此快捷方式的缺点是传递给done的最终数据值更加复杂，通过正常评估针对done的承诺数组而预期。

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

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

1 个答案:

说明：