for文で期待する値が取得できない

Question

jqueryを用いて、selectメニューの値が選ばれていたらテキストファイルを読み込む、という処理を行いたいと考えています。

<select id="id1">
	<option></option>
	<option>filename1</option>
</select>
<select id="id2">
	<option></option>
	<option>filename2</option>
</select>
<select id="id3">
	<option></option>
	<option>filename3</option>
</select>

for (var i = 1; i <= 3; i++) {
	var Id = '#id' + i;
	var IdValue = $(Id).val();
	
	if(IdValue){
		var loadFile = $.get("root/" + IdValue + ".txt");
		loadFile.done(function(data){
			console.log(data);
			console.log(i);
		});
	};
}

上記の記述で、<select id="id1">にてfilename1を選択すると
filename1.txtは読み込まれ、console.log(data)にその内容が正しく表示されます。

しかし、ここでconsole.log(i)で期待している値は「1」なのですが
実際には「4」が表示されてしまいます。

どうしてこういった結果となってしまっているのか解らず、質問させて頂きました。
ご教示いただければ幸いです。よろしくお願い致します。

Answer 1

非同期処理のためfunction(data){...}が処理されるのはループを抜けた後だから、というのが回答になりますが、詳細に説明すると大変なので、この辺りをお読みください。

非同期処理:コールバック/Promise/Async Function · JavaScript Primer #jsprimer

---

解決方法ですが、for (let i = 1;としてブロックスコープを持たせるといいかもしれません。

ブロックスコープ | 関数とスコープ · JavaScript Primer #jsprimer

Comments

[t8pda]

非同期処理完了時は既にループを抜けてしまっていたのですね
原因を教えて頂けて大変スッキリしました！
varをletとする事で期待する値を取得することもできました。
具体的な解決方法までご提示頂きありがとうございます！

非同期処理の理解が全く追いついていない事を改めて認識しましたので、
参考に貼っていただいたURLでしっかり勉強して参ります。