callback in for()

by yasumodev

HTML

<h3>forの中でコールバックが発生する例</h3>
悪い例
<br><textarea id="log1" cols="10" rows="2"></textarea>
<hr>
良い例１
<br><textarea id="log2" cols="10" rows="2"></textarea>
<hr>
良い例２
<br><textarea id="log3" cols="10" rows="2"></textarea>

JavaScript

// 外部処理（Web接続、DB接続など想定）
function external(callback) {
    setTimeout(callback, 1000);
}
// テスト用配列
var abc = ["a","b","c"];

// 悪い例
for(var i in abc) {
    // コールバックが発生する処理
    external(function() {
        document.getElementById("log1").value += abc[i];
    });
}

// 良い例１：ループ変数を受け取る関数でラップする
for(var i in abc) {
    wrap(i);
    function wrap(n) {
        // コールバックが発生する処理
        external(function() {
            document.getElementById("log2").value += abc[n];
        });
    }
}

// 良い例２：ループ変数を受け取る無名関数でラップする
for(var i in abc) {
    (function(n) {
        // コールバックが発生する処理
        external(function() {
            document.getElementById("log3").value += abc[n];
        });
    })(i);
}