いくつかのAjax呼び出しが完了した後にトリガーされたイベントを作成するには？

Question

私の状況に適したイベントを作成してください。私はカウンターなし、はそれを行うには 真の方法があると信じている（このような：How to know when all ajax calls are complete）

HTML：

<ul id="links"> 
    <li><a href="1.html">What is Yoda's first name?</a></li> 
    <li><a href="2.html">Why does Padme die?</a></li> 
    <li><a href="3.html">Who is Darth Rage?</a></li> 
</ul> 
<div id="content"></div> 

のjQuery：

$('#links a').each(function (index, el) { 
    url = $(el).attr('href'); 
    $('<div class="article" />').appendTo('#content') 
     .load(url, function(){ 
      filterOneArticle(this); 
     }); 
}); 

// I want this function run after all articles will be loaded and filtered 
$.bind('yepAllArticlesHaveBeenLoaded', filterAllArticles); 

filterAllArticles = function() {}; 
filterOneArticle = function(el) {}; 

Answer 1

もし、何らかの理由であなたはNickが示唆しているようにajaxStopを使用したくない場合（おそらく、他の関係のないAjaxリクエストがあなたを捨てることを心配している）、発行したリクエストの数を追跡し、成功/失敗がいつ確認できるかを確認することができます：

var requestCount = 0; 
$('#links a').each(function (index, el) { 
    url = $(el).attr('href'); 
    ++requestCount; 
    $('<div class="article" />').appendTo('#content') 
     .load(url, function(){ 
      filterOneArticle(this); 
      --requestCount; 
      if (requestCount == 0) { 
       filterAllArticles(); 
      } 
     }); 
}); 

これはのように見える競合状態（最初の記事が2番目のリクエストを要求する前に最初の記事の読み込みが完了したらどうなりますか？）、しかしそれはありません。ブラウザ上のJavaScriptはシングルスレッド（明示的に行う必要があるweb workersの使用を除く）であるため、最初の完了までにリクエストを開始するループを終了します。

Answer 2

ありajaxStopグローバルイベントのためにこれは：

$(document).ajaxStop(filterAllArticles); 

次のAjaxのバッチが終了する（任意のより多くのAJAXの活動が後がある場合）、それは実行されませんので、あなたは自分の filterAllArticles方法で .unbind()を呼び出すことができ、それをバインド解除するには、

：

$(document).unbind("ajaxStop", filterAllArticles); 

Answer 3

jQueryはこの動作をサポートしています。 jQueryを使用してajax呼び出しを以下のように行うことができます。このメソッドには成功と失敗の2つのコールバック関数があります。

function loadData() 
{ 
    $.ajax({ 
     type: "POST", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     url: 'methodurl', 
     success: methodSuccedded, 
     error: methodFailure 
    }); 
} 

function methodSuccedded() 
{} 

function methodFailure() 
{}