0

我正在构建一个客户端应用程序，我在其中向 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，但没有成功。

4

2 回答 2

1

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

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

于 2013-02-23T22:11:48.490 回答
1

您还可以使用同样适用于客户端的非常出色的异步库。

在这种情况下，最好使用同步 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
})
于 2013-02-23T22:17:14.933 回答