switch文によるコールバック地獄回避

url.txtに書かれているURLを取得し、そのURLのリソースの内容を取得し、1秒後にその内容をalertするという例(のための例)を考える。

まずは普通に書いてみる。

var client = new XMLHttpRequest;
client.open('GET', 'url.txt');
client.onload = function (event) {
    var url = client.response;
    client.open('GET', url);
    client.onload = function (event) {
        setTimeout(function () {
            alert(client.response);
        }, 1000);
    };
    client.send(null);
};
client.send(null);

次にswitch文を使って書いてみる。

var step = 0;
var client;
(function callback(arg) {
    switch (step++) {
    case 0: client = new XMLHttpRequest;
            client.open('GET', 'url.txt');
            client.onload = callback;
            client.send(null);
    break;  
    case 1: var url = client.response;
            client.open('GET', url);
            client.onload = callback;
            client.send(null);
    break;  
    case 2: setTimeout(callback, 1000);
    break;
    case 3: alert(client.response);
    }
}());

おまじないのswitch文によってベースとなるインデントが深くなるものの、メインとなるコードは縦に揃う。コードの流れもopensendopensendsetTimeoutとなり直観的。

……Duff's deviceのコードを見て思いついただけ。