Question

我正在构建一个客户端应用程序，我向YouTube API，Instagram API，Tumblr API发送请求。处理这些请求时，将执行适当的回调函数。

问题是YouTube总是先完成，通过underscore.js模板将数据附加到HTML。然后几秒钟后，Instagram和Tumblr的结果也被附加。

我的 app.js 文件包含3个单独的普通javascript函数：

function showYoutube() { ... }
function showInstagram() { ... }
function showTumblr() { ... }

如果所有3个回调函数都成功完成，我怎么能显示一个简单的“Loading ...”消息？

更新

仍在寻找可能的解决方案。请注意我没有后端服务，因此我仅限于JSONP API请求。

我的API调用位于 index.html 中，看起来像这样：

<script 
    type="text/javascript" 
    src="http://gdata.youtube.com/feeds/users/GoogleDevelopers/uploads?v=2&alt=json-in-script&format=5&callback=showMyVideos">
</script>

因此，函数showMyVideos()必须在全局范围内。我已经尝试实现 jQuery Deffered 和 Async.js Parallel 而没有运气。

Answer 1

使用promise模式，您可以在 n 项目执行完毕后触发函数/回调。因此，您可以显示一个微调器，触发三个异步函数，然后在完成所有三个函数后，触发一个函数来移除微调器。

jQuery有承诺，如果你使用下划线，我认为你可以使用underscore.deferred（我相信......我使用jQuery）

Answer 2

您还可以使用非常出色的async库，它也适用于客户端。

在这种情况下，最好使用同步JSONP调用，因为async将为您实现和控制异步部分。

//show loading icon
async.parallel([
    function (callback) {
        showYoutube() // have showYoutube() declared outside async.parallel 
                      // otherwise it will be inaccessible to the rest of your app.
        callback()
    },
    function (callback) {
        //send off to instagram
        callback()
    },
    function (callback) {
        //send off to tumblr
        callback()
    }
], function () {
    //all are done, hide loading icon
})

如何在等待多个异步JSONP回调时显示加载消息？

更新

2 个答案: