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

Question

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

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

我的 app.js 文件包含 3 个独立的纯 JavaScript 函数:

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

如何在所有 3 个回调函数成功完成之前显示简单的“正在加载...”消息？

更新:

仍在寻找可能的解决方案。请注意，我没有后端服务，因此我仅限于 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 Defered 和 Async.js Parallel 但没有成功。

Answer 1

您还可以使用非常出色的 async也可以在客户端运行的库。

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

//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
})