web-dev-qa-db-ja.com

jQueryを使用して複数のpromiseを並行して実行した後、完了を待ちます

Jqueryの遅延/ promise実装を使用して複数の非同期ajaxリクエストをキューに入れたい：

function doSomething() {
    console.log('doSomething')};

function makeMultiAjaxRequests1() {
    console.log('makeMultiAjaxRequests1')};

function makeMultiAjaxRequests2() {
    console.log('makeMultiAjaxRequests2')};

var step1 = function () { 
    var promise = new $.Deferred().promise();   
    makeMultiAjaxRequests1(); 
    return promise; }

var step2 = function () {
    var promise = new $.Deferred().promise();
    makeMultiAjaxRequests2();
    return promise; } 

step1()
   .then(step2())
   .done(doSomething());

$.when(step1(), 
       step2())
   .done(function () {
    doSomething();
});

これが フィドルリンク です。だから私の質問は：

Step1とstep2が並行して実行されるパターンでは、コードは最後のハンドラー関数に到達しません。どうして？

javascriptjqueryasynchronouscallbackdeferred
10
crishushu

Step1とstep2でdeferredobjを解決する必要があります

これを試して

function doSomething() {
    console.log('doSomething')};

function makeMultiAjaxRequests1(deferred) {
    console.log('makeMultiAjaxRequests1')
    deferred.resolve()};

function makeMultiAjaxRequests2(deferred) {
    console.log('makeMultiAjaxRequests2')
    deferred.resolve()};

var step1 = function () { 
    var deferred = new $.Deferred();   
    makeMultiAjaxRequests1(deferred); 
    return deferred; }

var step2 = function () {
    var deferred = new $.Deferred();
    makeMultiAjaxRequests2(deferred);
    return deferred; } 

step1().then(step2).done(doSomething);

$.when(step1(), step2()).done(function () {
    doSomething();
});
8
Daiwei

@Daiweiは良い答えを出します。

参照される一般的な要点は https://Gist.github.com/sergio-fry/3917217 bysergio-fryです。

並列で実行している引数の数が事前にわからない、より動的なアプローチが必要な場合は、JQuery（1.10+）の拡張の良い例を次に示します。

$.whenAll = function (deferreds) {
    function isPromise(fn) {
        return fn && typeof fn.then === 'function' &&
            String($.Deferred().then) === String(fn.then);
    }
    var d = $.Deferred(),
        keys = Object.keys(deferreds),
        args = keys.map(function (k) {
            return $.Deferred(function (d) {
                var fn = deferreds[k];

                (isPromise(fn) ? fn : $.Deferred(fn))
                    .done(d.resolve)
                    .fail(function (err) { d.reject(err, k); })
                ;
            });
        });

    $.when.apply(this, args)
        .done(function () {
            var resObj = {},
                resArgs = Array.prototype.slice.call(arguments);
            resArgs.forEach(function (v, i) { resObj[keys[i]] = v; });
            d.resolve(resObj);
        })
        .fail(d.reject);

    return d;
};

動的なライブ例で実際のコードを参照してください。

http://jsbin.com/nuxuciwabu/edit?js,console

4
mraxus

実際に到達できるURLを指定すると、done関数に到達します（jsfiddleの場合、つまり/echo/html/： http://jsfiddle.net/LnaPt/2/

基本的に、これを行う必要があります：

var promise = $.ajax({
    type: "GET",
    url: "/echo/html/",   //<-- instead of google     
}).promise();
0
Ryley