[JavaScript] jQuery Deferred で非同期処理を直列実行（逐次実行、順次実行）

JavaScriptでは、非同期処理が連続するとインデントが深くなりがちですが、jQuery の Deferred を利用すると、ややスッキリ書けます。

Deferred

取り急ぎサンプルソースを。

JavaScript

// １つめの非同期処理
(function() {
	var d = new $.Deferred();
	setTimeout(function() {
		alert("1");
		d.resolve(); // 次の処理へ
	}, 1000);
	return d.promise();
})()
// ２つめの非同期処理
.then(function() {
	var d = new $.Deferred();
	setTimeout(function() {
		alert("2");
		d.resolve(); // 次の処理へ
	}, 1000);
	return d.promise();
})
// ３つめの非同期処理
.then(function() {
	var d = new $.Deferred();
	setTimeout(function() {
		alert("3");
		d.resolve(); // 次の処理へ
	}, 1000);
	return d.promise();
});

ただ、毎回 Deferred を new したり、promise を return したりで、ちょい面倒でもあります。

MyAsync.js

『MyAsync.js』 を使うと、もうちょいシンプルに書けますよ。

JavaScript

MyAsync.run(
	// 非同期処理１
	function(baton) {
		setTimeout(function() {
			alert("1");
			baton.next(); // 次の処理へ
		}, 1000);
	},
	// 非同期処理２
	function(baton) {
		setTimeout(function() {
			alert("2");
			baton.next(); // 次の処理へ
		}, 1000);
	},
	// 非同期処理３
	function(baton) {
		setTimeout(function() {
			alert("3");
			baton.next(); // 次の処理へ
		}, 1000);
	}
);

(･o･ゞ いじょー。