最後にのみ結果を取得するためにメソッドをチェーンする方法はありますか？

Question

私はいくつかの.get()を集める簡単なサービス方法を持っています。私は結果の一部しか持っていないので、 "印刷"の部分にいくつかの問題があります。

私がやっていることは次のとおりです。

var service = function() { 
    var players = []; // will hold 100 objects 

    var getMembers = function(id) { 
    $.get(url, function(data) { 
     for(i=0; i<data.length; i++) { 
     var p = data[i]; 
     // get more info for this member 
     getMemberDetails(p.member_id); 
     // put the current data into the players 
     players.push(p); 
     } 
    }); 

    calculateAndPrint(); 
    }; 

    var getMemberDetails = function(id) { 
    $.get(url, function(data) { 
     var result = $.grep(players, function(e){ return e.member_id == id; }); 
     if (result.length == 0) { /* not found */ } 
     else if (result.length == 1) { 
     // push new data to player object 
     result[0].details = data; 
     } 
    }); 
    }; 

    var calculateAndPrint = function() { 
    for(i=0; i<players.length; i++) { 
     var p = players[i]; 
     console.log(p); 
    } 
    }; 
})(); 

、これは動作しません、私はcalculateAndPrintに達したとき、detailsがさえまだ設計されていないよう...

ので、私は$.Deferred()と試してみました私が持っている問題は、getMemberDetailsメソッドを延期すると、その呼び出しにはすでにdeffer呼び出し（.get()）が含まれており、同じ問題に戻っているということです。

oに最適なオプションは何ですか？ 100回の呼び出しがすべて行われた後に、calculateAndPrintを実行しますか？

それは十分に簡単そうですが、私はちょうど空白だ：/

Answer 1

あなたが約束を使用する場合、これはかなり簡単なはず：

var service = function() { 
    var getMembers = function(id) { 
     return Promise.when($.get("some service url")) 
      .then(function (data) { 
       return Promise.all(data.map(getMemberDetails)); 
      }); 
    }; 

    var getMemberDetails = function(player) { 
     return Promise.when($.get("some service Url?id=" + player.member_id)); 
    }; 

    var calculateAndPrint = function(players) { 
     players.forEach(function (player) { 
      console.log(player); 
     }); 
    }; 

    return { 
     getMembers: getMembers, 
     calculateAndPrint: calculateAndPrint 
    }; 
})(); 

service.getMembers().then(function (players) { 
    service.calculateAndPrint(players); 
}); 

Answer 2

あなただけのすべてのアヤックスがあなたを呼び出すための繰延オブジェクト$.deferredを作成することができます&を作成し、calculateAndPrint()メソッドを実行する前に、すべての遅延ジョブが完了するまで待ちます（$.when）。

---

は仕組み：

• は、すべてのAJAX呼び出し$.deferred &リターン約束オブジェクト.promise()のための繰延オブジェクトを作成します。
• ajax呼び出しが成功したかどうかによって、応答データ.resolve(responseData)で解決するか、エラーデータ.reject(errorData)で拒否します。
• ステップ1から返されたオブジェクトを約束し、完了したら、calculateAndPrint()メソッドを呼び出して、すべてのajax呼び出しを監視します。
• 任意のajax呼び出しの場合、上記のロジックのほとんどはforループで呼び出され、遅延呼び出しのそれぞれがdeferredCalls配列にプッシュされる点を除き、ほとんど同じです。

注：あなたの作るAjaxの呼び出しは、あなたがすぐにバックグラウンド動作について知らさ&保管ユーザーの応答を取得しないため、常に優れたユーザーエクスペリエンスの記号であるとき、私はいくつかのローダ/スピナー画像を表示するようお勧めします。

JSコード：

/* utils */ 
var $ul = $('ul'); 

function msg(text) { 
    $ul.append('<li>' + text + '</li>'); 
} 

/* functions */ 
function asyncThing1() { 
    var dfd = $.Deferred(); 
    setTimeout(function() { 
    msg('asyncThing1 seems to be done...'); 
    dfd.resolve('banana'); 
}, 1000); 
return dfd.promise(); 
} 

function asyncThing2() { 
    var dfd = $.Deferred(); 
    setTimeout(function() { 
    msg('asyncThing2 seems to be done...'); 
    dfd.resolve('apple'); 
    }, 500); 
    return dfd.promise(); 
} 

function asyncThing3() { 
    var dfd = $.Deferred(); 
    setTimeout(function() { 
    msg('asyncThing3 seems to be done...'); 
    dfd.resolve('orange'); 
    }, 1500); 
    return dfd.promise(); 
} 

/* do it */ 
$.when(asyncThing1(), asyncThing2(), asyncThing3()).done(function(res1, res2, res3) { 
    msg('all done!'); 
    msg(res1 + ', ' + res2 + ', ' + res3); 
}); 

Live Demo @ JSFiddle

---

任意繰延通話Original SO Post：

//Push all arbitrary ajax calls to deferred array 
var deferreds = []; 
function getSomeDeferredStuff() { 
    var i = 1; 
    for (i = 1; i <= 10; i++) { 
     var count = i; 
     deferreds.push(
     $.post('/echo/html/', { 
      html: "<p>Task #" + count + " complete.", 
      delay: count 
     }).success(function(data) { 
      $("div").append(data); 
     })); 
    } 
} 


// define a extension method for $.when for creating/managing deferred 
// objects for every ajax call 
if (jQuery.when.all===undefined) { 
    jQuery.when.all = function(deferreds) { 
     var deferred = new jQuery.Deferred(); 
     $.when.apply(jQuery, deferreds).then(
      function() { 
      var deferredObjs= function (arguments) { return deferreds.length > 1 ? $.makeArray(arguments) : [arguments]; } 
      deferred.resolve(deferredObjs); 
      }, 
      function() { 
      deferred.fail(deferredObjs); 
      }); 

     return deferred; 
    } 
} 

//passing the deferred calls array to $.when 
$.when.all(deferreds).then(function(objects) { 
    //process when all deferred objects compelted 
    console.log("Resolved/rejected objects:", objects); 
}); 

Working example for arbitrary ajax calls @JSFiddle