0

YouTube API、Instagram API、TumblrAPIにリクエストを送信するクライアントサイドアプリケーションを構築しています。これらのリクエストが処理されると、適切なコールバック関数が実行されます。

問題は、YouTubeが常に最初に終了し、underscore.jsテンプレートを介してHTMLにデータを追加することです。それから数秒後、InstagramとTumblrの結果も追加されます。

私のapp.jsファイルには、3つの個別のプレーンJavaScript関数が含まれています。

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

3つのコールバック関数がすべて正常に完了するまで、単純な「Loading ...」メッセージを表示するにはどうすればよいですか？

アップデート：

まだ可能な解決策を探しています。私はバックエンドサービスを持っていないので、JSONPAPIリクエストのみに制限されていることに注意してください。

私の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()はグローバルスコープ内にある必要があります。運が悪かったので、 jQueryDefferedとAsync.jsParallelを実装してみました。

4

2 に答える 2

1

n個のアイテムの実行が終了した後に関数/コールバックを起動できるpromiseパターンを使用します。したがって、スピナーを表示し、3つの非同期関数を起動し、3つすべてが完了したら、関数を起動してスピナーを削除できます。

jQueryには約束があり、アンダースコアを使用している場合は、underscore.deferredを使用できると思います（私は信じています...私はjQueryを使用しています）

于 2013-02-23T22:11:48.490 に答える
1

また、クライアント側でも機能する非常に優れた非同期ライブラリを使用することもできます。

この場合、sync 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
})
于 2013-02-23T22:17:14.933 に答える