我正在构建一个客户端应用程序,在其中向 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 但没有成功。
最佳答案
您还可以使用非常出色的 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
})
关于javascript - 如何在等待多个异步 JSONP 回调时显示加载消息?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15046295/