JavaScript
jQuery

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

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

Deferred

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

JavaScript
// 1つめの非同期処理
(function() {
    var d = new $.Deferred();
    setTimeout(function() {
        alert("1");
        d.resolve(); // 次の処理へ
    }, 1000);
    return d.promise();
})()
// 2つめの非同期処理
.then(function() {
    var d = new $.Deferred();
    setTimeout(function() {
        alert("2");
        d.resolve(); // 次の処理へ
    }, 1000);
    return d.promise();
})
// 3つめの非同期処理
.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(
    // 非同期処理1
    function(baton) {
        setTimeout(function() {
            alert("1");
            baton.next(); // 次の処理へ
        }, 1000);
    },
    // 非同期処理2
    function(baton) {
        setTimeout(function() {
            alert("2");
            baton.next(); // 次の処理へ
        }, 1000);
    },
    // 非同期処理3
    function(baton) {
        setTimeout(function() {
            alert("3");
            baton.next(); // 次の処理へ
        }, 1000);
    }
);

(・o・ゞ いじょー。