JavaScriptにおけるループ内での非同期画像読み込み

画像のパスが配列に格納されているとします:

let arr = ['img1.png', 'img2.png', 'img3.png'];

これらの画像をループで読み込むことができます:

for (let path of arr) {
	loadImage(path, function(image, err) {
		document.body.append(image);
	});
}

コードは美しく、callback hellにも陥っていません。しかし、以前あった2つの問題に戻ってしまいました: 画像の順序が保証されず、全ての画像の読み込み完了の瞬間を捉えることが不可能です。

この状況には解決策がありません: ループを開始し、その中で非同期関数を使用し、その後ループ内の全ての関数が完了する瞬間を捉えることは不可能です。あなたがその瞬間を捉える必要がない場合、上記のコードは適しています。それ以外の場合は、callback hellへようこそ。

しかし、落胆する必要はありません。この問題は、次のレッスンで学ぶプロミスを使用することで解決可能です。