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
文によってベースとなるインデントが深くなるものの、メインとなるコードは縦に揃う。コードの流れもopen
→send
→open
→send
→setTimeout
となり直観的。
……Duff's deviceのコードを見て思いついただけ。