forループで重たい処理を順番に実行したいんや！(JavaScript)

I wrote: 2018/03/23

JavaScriptでハマったのでメモを綴ります。

ハマった箇所
読み込んだ画像をcanvasに描画する時、１枚の画像なら全く問題ないのですが、forループで複数の画像を読み込むと順番どおりに描画されない。なんで意図した通りに動かないや！意味わからんわ！

なんで！？
javascriptについてそれほど知識も経験もないので意味不明だったが、これはjsでは常識、当たり前のことみたい。重めの処理を連続で実行すると、重い処理が完了しないまま次の重い処理を実行しにいく感じになってしまい、ダメじゃんってなると判明！非同期ってこわい・・・

解決したい！
１つ１つの処理を順番に実行するように工夫すればいいのだ。じゃあどうするか、調べてみるとPromiseを使えばいいみたい。（async/awaitってのもあるみたいだから近いうちに使いたい）。

const loadImage = (path) => {
	return new Promise(resolve => {
		let image = new Image();
		image.onload = () => { resolve(image); }
		image.src = path;
	});
};
// 10回分、画像を順番に読み込んで処理できる
for (let index = 0, p = Promise.resolve(); index <= 10; index++) { 
	p = p.then((image) => {
		if (image) {
		// write your code
		}
		return loadImage(path);
	});
} 

解決できて良かった( ◠ ◡ ◠ )