複数の image onload を for で回す時のコツ

multiple でアップーロードされた複数画像を処理したいときに
こんなコード書いて困ったことはありませんか？奥さん

var files = $(this)[0].files;

for (var iLp = 0; iLp < files.length; iLp++) {
  image.onload = function() {
    conlose.log("width=" + image.width);
    conlose.log("filesize=" + file.size);
  };

  image.src = URL.createObjectURL(file);
}

これだと、結果がなぜか全部同じwidth, sizeになるんですよ。
これって、image.onload のコールバックが遅れて実行されるときには
forループが最後まで回ってしまって、全部最後の file を参照してしまうっていう(笑)

これの解決方法なんですが、
javascript特有の即時関数ていうのを使います。

余談ですが、この概念はjavascriptでしかないらしく
初めて聞いた時、カルチャーショックを受けました。
ただし、ES6 では、このよくわからない概念はなくなるそうです
(ああ、この問題で悩むので時間を浪費したので、さっさとなくなって欲しかった)

以下のようにすると、なぜか
ちゃんと file を同期して取得してくれるみたいです。
あら不思議

var files = $(this)[0].files;

for (var iLp = 0; iLp < files.length; iLp++) {
  (function(file) {
    image.onload = function() {
      conlose.log("width=" + image.width);
      conlose.log("filesize=" + file.size);
    };

    image.src = URL.createObjectURL(file);
  } (file));
}