jQuery.Deferred を使って、可変数の非同期処理の全ての終了を待ってから処理を実行する方法について簡単に紹介します。なお、この記事は jQuery.Deferred の記事ではなくて、どちらかというと関数オブジェクトの apply メソッドについての簡単な用法の解説になります。
クライアントサイドの Web アプリケーションで、外部 API などからデータを読み込み、その結果を待って処理を行いたい場合があります。jQuery を使うと、通常、次のように書きます。
jQuery.Deferred を使って、可変数の非同期処理の全ての終了を待ってから処理を実行する方法について簡単に紹介します。なお、この記事は jQuery.Deferred の記事ではなくて、どちらかというと関数オブジェクトの apply メソッドについての簡単な用法の解説になります。
クライアントサイドの Web アプリケーションで、外部 API などからデータを読み込み、その結果を待って処理を行いたい場合があります。jQuery を使うと、通常、次のように書きます。
例えば、画像を予めロードし、その画像のロード完了後に何か処理を行いたい時、img 要素の onload イベントを利用することになると思います。jQuery を使った例だと、次のようになります。
1 2 3 4 5 6 |
var img; img = $('<img>'); img.attr('src', 'http://...image_url...'); img.on('load', function() { // ...any processing on loaded... }); |
ところが、IE8において、画像がブラウザにキャッシュされていると img 要素の onload イベントが呼ばれないという現象があります。うむむ。これはちょっとやっかい。。。
2013 年 6 月 15 日開催の WordPress のビッグイベント「WordCamp Kobe 2013」に参加しました! そのレポート?…というよりは、色々と思ったことを書かせて頂きます。