Javascript Nester在循环中延迟ajax调用

我有一个复杂的（至少对我来说）嵌套循环、ajax调用和延迟设置。代码调用一个API，解析出相关数据，然后使用它进一步调用其他API

它几乎按预期工作。我使用这个问题的答案（）来构建它。这是我的密码：

function a() {
var def = $.Deferred();
var req = [];

for (var i = 0 /*...*/) {
    for (var j = 0 /*...*/) {
        (function(i, j) {
            req.push($.ajax({
                //params
            }).done(function(resp) {
                var def2 = $.Deferred();
                var req2 = [];

                for (var k = 0 /*...*/) {
                    for (var l = 0 /*...*/) {
                        req2.push(b(l));
                    }
                }

                $.when.apply($, req2).done(function() {
                    console.log("Got all data pieces");
                    def2.resolve();
                })
            }));
        })(i, j);
    }
}

$.when.apply($, req).done(function() {
    console.log("Got all data");
    def.resolve();
});

return def.promise();

}

}

}

以下是我希望在通话结束后看到的内容

(In no specific order)
Got data piece #1
Got data piece #0
Got data piece #2
Got all data pieces
Got data piece #2
Got data piece #1
Got data piece #0
Got all data pieces
Got data piece #0
Got data piece #1
Got data piece #2
Got all data pieces
Got all data            <-- These two must be last, and in this order
All done

我在调试器中逐步完成了它，在其他所有操作完成后，函数a（）中的“get all data”行将按正确的顺序打印出来，之后将调用def.resolve（）并解析返回的承诺

---

但是，在main（）中，a（）立即被视为已解析，代码直接跳转到打印“全部完成”并显示页面。关于为什么它没有按预期的那样等待，你有什么想法吗？

你已经演示了一组代码，并说它没有达到你预期的效果，但你没有真正描述整个问题。所以，我实际上不知道应该推荐什么代码。我们在处理实际问题时比处理伪代码问题时做得更好。因此，相反，我能做的是概述代码中的一系列错误：

需要并行异步操作的串行顺序

根据您所说的预期，似乎缺少控制异步操作的基本逻辑。当您对一系列已经启动的承诺使用

$.When（）

时，您将并行运行一系列异步操作。他们的完成顺序完全不可预测

是的，您似乎希望能够并行运行一整套

b（i）

，并按顺序完成它们。似乎是这样的，因为您说您期望这种类型的输出：

获取数据块#0 获取数据块#1 获得数据块#2

其中，这些语句中的每一个都是通过完成一些

b（i）

操作生成的

这根本不会发生（或者，如果在现实世界中发生了，那将是一种盲目的运气，因为没有代码来保证顺序）。现在，您可以并行运行它们，并使用

$。when（）

跟踪它们和

$。when（）

将让您知道它们何时完成，并按顺序收集所有结果。但当该组中的每个异步操作都完成时，这取决于机会

因此，如果您真的希望您的

b（i）

操作按顺序运行和完成，那么您必须有目的地对它们进行排序（运行一个，等待它完成，然后运行下一个，等等）。通常，如果一个操作不依赖于另一个操作，则最好并行运行它们，并让

$.when（）

跟踪它们并为您排序结果（因为通常通过并行运行它们而不是排序它们来更快地获得最终结果）

在许多地方制造不必要的延迟-鼓励反模式

在这段代码中，根本不需要创建延迟

$.ajax（）

已返回承诺。你可以用这个承诺。因此，与此相反：

function b(j) {
    var def = $.Deferred();

    $.when.apply(
        $.ajax({
            //params
        })
    ).then(function() {
        console.log("Got data piece #" + l);
        def.resolve();
    });
    return def.promise();
}

您可以这样做：

function b(j) {
    return $.ajax({
        //params
    }).then(function(data) {
        console.log("Got data piece #" + l);
        return data;
    });
}

请注意，您只需直接返回由

$.ajax（）

生成的承诺，并且根本不需要创建延迟。这对于错误处理来说也是非常可靠的。您的方法被称为反模式的原因之一是您根本不处理错误（使用此反模式时常见的错误）。但是，改进后的代码将错误直接传播回调用方，就像它们应该那样。在您的版本中，如果

$.ajax（）

调用拒绝了它的承诺（由于错误），那么您的延迟将永远不会得到解决，调用方也不会看到错误。现在，您可以编写额外的代码来处理错误，但没有理由这样做。只要回报你已经做出的承诺。当使用返回承诺的异步操作进行编码时，您几乎不需要创建自己的延迟操作

$.when（）

仅当您有多个承诺时才需要

在

b（）

函数中，不需要使用

$。在这段代码中使用
$时：

$.when(
    $.ajax({
        //params
    })).then(...);

当您有一个承诺时，您只需直接在其上使用
.then（）

    $.ajax({
        //params
    }).then(...);

只有当您有多个承诺并且希望知道所有承诺何时完成时，才使用
$.when（）
。如果您只有一个承诺，只需使用它自己的
.then（）
处理程序即可

更多反模式-只需返回
.then（）
处理程序的承诺即可

在内部循环中，您有以下内容：

            $.when.apply($, req2).done(function() {
                console.log("Got all data pieces");
                def2.resolve();
            })

这里有几件事不对。现在还不清楚您想做什么，因为
def2
是一个其他任何东西都无法使用的延迟。因此，似乎您正试图告诉某人这组承诺何时完成，但没有人使用它。此外，这是反模式的另一个版本<代码>$。when（）
已返回承诺。当
$.when（）
完成时，不需要创建延迟解析。您可以使用
$.when（）
已经返回的承诺

虽然我不完全了解您在这里的意图，但似乎您应该做的是完全摆脱延迟的
def2
，并执行以下操作：

            return $.when.apply($, req2).done(function() {
                console.log("Got all data pieces");
            });

从它所在的
.then（）
处理程序返回此承诺将把此操作序列链接到父承诺，并使父承诺在父承诺解析之前等待此新承诺解析（这与所有
req2
承诺完成时相关）。这就是如何使父承诺依赖于
.then（）
处理程序中的其他承诺。您从
.then（）
处理程序返回一个承诺

同样的问题也适用于您的外部
$.when.apply（$，req）    $.ajax({
        //params
    }).then(...);

            $.when.apply($, req2).done(function() {
                console.log("Got all data pieces");
                def2.resolve();
            })

            return $.when.apply($, req2).done(function() {
                console.log("Got all data pieces");
            });

function a() {
    var req = [];

    for (var i = 0 /*...*/) {
        for (var j = 0 /*...*/) {
            (function(i, j) {
                req.push($.ajax({
                    //params
                }).then(function(resp) {
                    var req2 = [];

                    for (var k = 0 /*...*/) {
                        for (var l = 0 /*...*/) {
                            req2.push(b(l));
                        }
                    }

                    return $.when.apply($, req2).done(function() {
                        console.log("Got all data pieces");
                    });
                }));
            })(i, j);
        }
    }

    return $.when.apply($, req).done(function() {
        console.log("Got all data");
    });
}    

function b(j) {
    return $.ajax({
            //params
    }).then(function(data) {
        console.log("Got data piece #" + l);
        return data;
    });
}

function main() {
    //...

    a().then(function() {
        console.log("All done");
        displayPage();
    });

    //...
}