Question

我正在启动一个具有多个过程的Web应用程序，这需要一些时间。为了减少加载时间，我想实现如下的异步处理：

loadXML()-----
              \
loadCanvas()---setupCanvas()
                            \
setupYoutubePlayer()---------startApplication()

也就是说，当加载页面时，我想开始loadXML()，loadCanvas()和同时setupYoutubePlayer()，setupCanvas()和loadXML()时触发loadCanvas() setupApplication()已完成，setupCanvas()在setupYoutubePlayer()之后启动 loadXML()已完成。

setupCanvas()和setupYoutubePlayer()包含AJAX处理，onYouTubeIframeAPIReady()包含API访问权限，是API指定的回调函数（Deferred.promise()）。

经过几天的谷歌搜索，我找到了 jQuery.Deffered和 Async.js。谈到Deffered，我可以包装所有 Deferred.resolve()和when()的流程，但我找不到简单的解决方案使用then()和setupYoutubePlayer()实现此嵌套异步处理。至于Async.js，我不知道如何处理{{1}}。

我错过了什么？或者在这种情况下还有其他知识吗？请帮忙。感谢。

Answer 1

帮自己一个忙，并使用真正的承诺实现，忘掉jQuery中的 roflmaolol 实现。

看看http://www.promisejs.org/（http://www.promisejs.org/intro/#all更具体），他们有各种用例的代码示例和几个不同的promise lib的列表。一些lib是最小的准系统，而其他的提供扩展到promise规范。

如果我理解你的流程是正确的，那么可能会这样做：

var a = loadXML();
var b = loadCanvas();
Promise.all([a, b]).then( function() {
    var c = setupCanvas();
    var d = setupYoutubePlayer();
    return Promise.all([c, d]);
} ).done( startApplication );

或者，如果setupYoutubePlayer可以在与loadXML和loadCanvas功能相同的步骤中调用：

var a = loadXML();
var b = loadCanvas();
var c = setupYoutubePlayer();
Promise.all([a, b]).then( function() {
    var d = setupCanvas();
    return Promise.all([c, d]);
} ).done( startApplication );

有人可能会进一步优化上述代码，但我将其作为练习留给读者;）

Answer 2

这是非常重要的，即使只是jQuery承诺（假设1.8+）你可以做：

var xml = loadXML();
var canvas = loadCanvas();
var youtubePlayer = setupYoutubePlayer();
$.when(
    $.when(xml, canvas).then(setupCanvas),
    youtubePlayer
).then(startApplication);

Answer 3

您还可以使用Iced CoffeeScript，它允许您等待和推迟关键字以同步方式处理异步回调。

如何在JavaScript中管理复杂的异步处理？

3 个答案: