【jQuery】順番に処理を実行する .when() と .done() の使い方

JavaScript を書いているときに、複数の処理を順番に実行したい場面に遭遇します。

そんなときに［.when()］と［.done()］を使うのが便利です。

.when() は先に実行したい処理。
.done() は後で実行したい処理。

覚えるのも使うのも簡単です。

.when() と .done() をメソッドチェーンで繋げる。ついでに .fail() も追加。

.when() と .done() の２つはメソッドチェーンで繋げることが可能です。
ここではさらに .fail() も追加するコードを紹介します。

<script>
$(function() {
	$.when(
		// 先に実行したい処理
		console.log('処理1'),
		console.log('処理2')
	).done(function() {
		// 後に実行したい処理
		console.log('処理3');
		console.log('処理4');
	}).fail(function() {
		// エラーが発生したときの処理
	});
});
</script>

上記のように記述するとエラー時の処理も書けるのでますます便利になります。

なお.when()の中のコードはセミコロンではなくカンマで繋がないとエラーになるので注意が必要です。

具体的にはページを読み込んだ時のローディングの処理やAJAX通信を行うときに多用すると思います。
ぜひお役立てください！