最初の非同期処理を完了後に次の処理を実行させる「jQuery.when()」

2018年8月6日

最初の非同期処理を完了後に次の処理を実行させる「jQuery.when()」

AjaxでAPI用のアクセストークン等のデータをJSONを取得して処理、受け取ったアクセストークンをもってまたAjaxで通信、といった場合、「最初の非同期処理が正常に完了したら次の処理を実行」という順序で処理してもらえないとうまく動作しない場面がありますよね。

そんな時に見やすく使いやすい書き方として「jQuery.when()」という記述方法があります。

jQuery.when()とは

視覚的にもわかりやすいjQuery.when()、簡単に言うと「whenの処理が完了したらdoneの処理が走り、whenの処理でエラーがあればfallに落ちる」というもの。例としては以下の通りです。

$(function(){
$.when(
    $.getJSON('sample_a.json'),
    $.getJSON('sample_b.json')
)
.done(function(json_sample_a, json_sample_b) {
    // whenが全て成功した場合の処理
    console.log(json_sample_a, json_sample_b);
})
.fail(function() {
    // whenでエラーがあった場合の処理
    console.log('エラーが発生しました');
});
});

複数の処理をそのまま書いてうまく動作しない場合は「jQuery.when()」を使って明示的に処理順を切り分けて記述してみると解決するかもしれません。
以上、最初の非同期処理を完了後に次の処理を実行させる「jQuery.when()」でした。

when, done, fall