jQueryでajax完了後に実行開始したい処理があるときの対応

ajaxって便利ですよね。
非同期でコンテンツを追加読み込みする際は必須の手法です。

あまりない状況かと思いますが、今回ajaxで読み込んだコンテンツの高さを取得する必要がありました。
しかもajaxの実行はループ内（each関数）で数回行うという合わせ技です。

処理の順序としては、
（１）ajaxでコンテンツ読み込み。を数回繰り返し。
（２）読み込んだ各コンテンツの高さ取得。をまた数回繰り返し。
です。繰り返しの繰り返しです。

が、この処理の実行順序がなんとも不安定。
かつ、（２）の処理が（１）の実行途中で先走っている始末。

ダメダメの繰り返しじゃんってことで調べました。

ajaxCompleteで解決！と思いきや

ajaxCompleteを使えば、ajax処理が完了した時点で着火します。
用途はこんな感じです。

	$(document).ready(function(){
	    //コンテンツ読み込み
	    $(".container").each(function(index){
	    	var obj = $(this);
			$.ajax({
				url: 'sample'+index+'.html',
				dataType: 'html',
				success: function(data) {
					$(obj).append(data);
				}
			});
	    });
	});

	$(document).ajaxComplete(function() {
	    //コンテンツ高さ取得
		$(".container").each(function(index){
			item_obj[index] = $(this).outerHeight();
		});
	});

これでちゃんとajax完了時に実行されており、高さもバッチリ取得されていました。

しかしこのajaxComplete君、ajax処理が１回完了する度に走り出してしまいます。
ですので、今回のような繰り返し処理の場合、（２）の処理がajaxの数だけ繰り返されます。
またもや繰り返しの繰り返しです。

ajaxStopで解決！

名前だけみると、止めちゃうの？って不安になりますが、止めません。
ページ内のajaxがすべて完了した時に実行するスグレモノです。

そしてこのように改善。

	$(document).ready(function(){
	    //コンテンツ読み込み
	    $(".container").each(function(index){
	    	var obj = $(this);
			$.ajax({
				url: 'sample'+index+'.html',
				dataType: 'html',
				success: function(data) {
					$(obj).append(data);
				}
			});
	    });
	});

	$(document).ajaxStop(function() {
	    //コンテンツ高さ取得
		$(".container").each(function(index){
			item_obj[index] = $(this).outerHeight();
		});
	});

バッチリやん！