jQueryの$.Deferred、$.whenの使い方を整理してみました

  • 11
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

$.Deferred

var d = new $.Deferred();
//何かしらの非同期処理
return d.promise();

このようにプロミスオブジェクトを返してあげることで、関数同士をthenでつなぐことが出来る。
$.getなどの処理が終わった後はd.resolve()で次の関数に処理が移動する。

$.when

複数のスレッドの処理が終わるのをまって何か処理を書きたい時に使用する。
得てしてスレッドは可変である場合が多いので、$.when.apply($,arr);と、applyメソッドを使ってあげると便利。
プロミスオブジェクトを返す

var defarr = [];
ajaxs.forEach(function(){
    defarr.push(d.promise());
    //何かしらの非同期処理
});
return $.when.apply($,defarr);

サンプル

5秒待って、ajaxsに格納されたURLから複数jsonを取得して、"everything is done"というメッセージを出す


//配列ajaxsには予めURLが複数格納されているものとする

var wait = function(){
    var d = new $.Deferred();
    setTimeout(function(){
        d.resolve();
    },5000);
    return d.promise();
}

var getObjs = function(){
    var defarr = [];
    ajaxs.forEach(function(url){
        var d = new $.Deferred();
        $.getJSON(url,function(json){
            items.push(json);
            d.resolve();
        });
        defarr.push(d.promise());
    });
    return $.when.apply($,defarr);
}

var message = function(){
    console.log("everything is done");
}

wait().then(getObjs).then(message);