2015-09-14 5 views
5

eachという文があり、その中にajaxを呼び出してサーバーに情報を送信します。jQueryでforeach文を使用すると、すべてのAjaxリクエストが完了した後に関数を呼び出します。

$.each(array, function(k, v) { 
    $.ajax({ 
     ... 
    }); 
}); 

すべて AJAXリクエストは、その後行われ、ここで関数を呼び出しているとき... はどのようにそれを行うには?

私はasync: falseフラグは廃止されましたので、これ以上使用できません。

答えて

12

ストア約束は配列に$.ajaxによって返され、その後、それらすべてが完了するのを待つために$.whenを使用します。

var promises = []; 
$.each(array, function(k, v) { 
    promises.push($.ajax({ 
     ... 
    })); 
}); 
$.when.apply($, promises).then(function() { 
    // They're all done now 
}); 

または$.mapを使用して:

$.when.apply($, $.map(array, function(k, v) { 
    return $.ajax({ 
     ... 
    }); 
})).then(function() { 
    // They're all done now 
}); 

あなたが見たいと思うでしょうdonethen、およびalwaysで、どちらがシナリオに最適かを判断します。

$.whenのAPIは、少し壊れたのビットが壊れています。そのため、私たちはそれを奇妙な方法で呼び出す必要があります。それがすることは、離散的な議論としての約束の束を受け入れ、あなたがそれを渡す約束のすべてが解決されたときに解決される新しい約束を返すことです。例えば:

$.when(promise1, promise2, promise3).then(...); 

しかし、頻繁に、我々は(例えば上記のように)約束の配列を持っています。 Function#applyは配列を受け取り、配列のエントリを持つ関数を個別の引数として呼び出すため、個別の引数が必要なので、Function#applyを呼び出します。Function#applyは配列を受け入れます。

$.whenは、それはあなたがそれを与える約束のすべてが解決された場合、または任意のあなたはそれが拒否され与える約束のその約束を拒否したときに返す約束を解決します。したがって、ajax呼び出しのいずれかが失敗した場合、他の呼び出しが未処理の場合でも、すぐにコールバックを取得します。

あなたがそれを望まないのなら、あなた自身の関数を書く必要があります。これは難しくありません。

ちょうどそれらをすべて待ってから、いずれかが失敗したかどうかによって解決または拒否されます。あなたはさらにそれを取って、一連の結果で解決したり拒否したりすることができます。


あなた自身の効用関数を与えることで、もう少し便利に配列して$.whenを行うことができます。

function whenAll(array) { 
    return $.when.apply($, array); 
} 

を...その後、:

whenAll($.map(array, function(k, v) { 
    return $.ajax({ 
     ... 
    }); 
})).then(function() { 
    // They're all done now 
}); 

あなたも$にそれを追加することができますが、もちろん、jQueryの将来のバージョンでは、whenAllを定義することができ、とても注意が必要です。

+0

なぜ「then」ではなく「done」を使用してみませんか? –

+0

@SnakeEyes:複数の関数を提供する '' then 'が良い選択かもしれません( '' then''と '' done''は同じものです)、 '' always''です。おそらく、ajax呼び出しの1つ以上が失敗した場合でも、通知が必要な場合があります。 –

+0

@SnakeEyes:参考までに、私が気づいたのは、他の人が未だ優秀であっても、あなたがそれを拒否する約束をするとすぐに「$。私はそれをフラグするための答えを更新し、それらのいずれかが失敗してもそれらのすべてを待っていたい場合は代替手段を提供します。 –

関連する問題