javascript - 用于管理多个异步 JavaScript 操作的设计模式

Question

我正在寻找一种好的设计模式来跟踪一堆不同的异步 JavaScript 事件(图像加载、多个 AJAX 调用、顺序 AJAX 调用等......)，这比大量自定义回调和自定义状态更好变量。你建议我用什么？是否有任何类型的队列系统具有除排序之外的逻辑能力？

示例问题

我有一个启动序列，涉及许多异步进程(加载图像、等待计时器、进行一些 ajax 调用、进行一些初始化)。一些异步进程可以启动同时运行(加载图像、AJAX 调用)，而另一些则必须按顺序运行(运行 AJAX 调用 #1，然后运行 ​​AJAX 调用 #2)。现在，我已经让一切都在回调函数和一堆全局状态下运行，这些全局状态跟踪已完成或尚未完成的内容。它可以工作，但它非常困惑，并且由于确保正确处理所有排序可能性和错误条件的复杂性，我遇到了一些错误。

当你遇到问题时，调试起来也很痛苦，因为这就像海森堡不确定性原理。一旦您在序列中的任意位置设置断点，一切都会发生变化。您必须在代码中放入各种调试语句才能尝试辨别发生了什么。

这里有更具体的描述:

1. 正在加载三张图片。一旦加载了一张特定图像，我就想显示它。一旦它显示了一定时间，我想显示第二张图像。第三个进入队列以供稍后显示。

2. 必须按连续顺序发生三个 AJAX 调用(其中一个调用的输出用作下一个调用的输入的一部分)。

3. 当 AJAX 调用完成后，需要对结果进行大量 JS 处理，然后需要加载另外两个图像。

4. 加载这两个图像后，还有更多显示工作要做。

5. 完成所有这些后，您将检查其中一张图像已显示多长时间，如果已经过去了足够的时间，则显示下一张图像。如果没有，请再等待一段时间再显示下一张图像。

每个步骤都有成功和错误处理程序。一些错误处理程序启动仍可以成功继续的备用代码。

我不希望任何人遵循这里的确切流程，只是为了让人们了解步骤之间的逻辑类型。

编辑:我遇到了YUI's AsyncQueue这不是我所遇到的问题类型的完整解决方案，但位于同一空间。它似乎更适合对一堆异步操作进行排序或排序，但我不知道它对我的决策类型有什么帮助。

Answer 1

看一下Promises/A的概念。 jQuery 使用 jQuery.Deferred 对象实现此功能。

这是一个不错的 article展示它如何对您的情况有用。我问了类似的question不久前。