不定数の画像を全て読み込んだことを感知する非同期処理について/Javascript

Question

前提・実現したいこと

javascriptで画像を読み込んだのち、その画像のwidthと元のデータを使用して処理を行い、すべてが終了した時点で他の処理を行いたいと思っています。
色々調べてはみたのですが、onloadで読み込んだ画像自体の情報と、その画像が何番目のデータのものなのかを共に扱うことがどうしてもできません。

該当のソースコード

//dataに画像のurlやその他のデータが格納されています

function test(data) {
            var count = 0;
            for (i = 0; i < data.length; i++) {
                var image = new Image();
                image.src = data[i].ImageUrl;
                image.onload = function () {
                    console.log(i+'番目のデータの画像の横幅は"+image.width);
                    ++count;
                    if (count == data.length) {
                        console.log('全て終了');
                    }
                }

            }
        }

$.when(test()).done(
//test終了後に処理
)

結果として横幅は正しいものがとれるのですが、iの部分が例えばdataが10個あるとしたら全て11になってしまします。
非同期で処理してるために、一番最後のiが取得されているためだと思います。
かといってcountをとったとしても、それは読み込みが完了した順であってデータの順番ではなくなってしまいます。

Answer 1

非同期で処理してるために、一番最後のiが取得されているためだと思います。

ES6が使える環境なら、iをletで宣言するだけでこの問題を回避できます。

for (let i = 0; i < data.length; i++) {

使えないときは、ループ1回毎に無名関数を切るという手段があります。

for (var j = 0; j < data.length; j++) {
  (function(i){
    // ループの中身はそのままでOK
  })(j);
}

Comments

[miyabi-sun]

そういえばIE11ってES2015の構文がほぼ全滅ですが
唯一letとconstだけいけましたよね？
http://kangax.github.io/compat-table/es6/#test-let
試してみる価値はありそうです。

[maisumakun]

ただ、IE11ではlet+forループのスコープはうまく動かない、という情報もあります。

https://kangax.github.io/compat-table/es6/

[miyabi-sun]

対応状況よく見たら12/14になってて、
「for/for-in loop iteration scope」関係は非対応…今回のように関数で包んで持ち出すとアウトだそうで駄目みたいですね。

Answer 2

無名関数で包んで引数定義しておき、
Function.ptototype.bindで固定してしまうのはどうでしょうか？

image.onload = (function (i) {
  console.log(i+'番目のデータの画像の横幅は"+image.width);
  ++count;
  if (count == data.length) {
    console.log('全て終了');
  }
}).bind(null, i);