ループ内でXMLHttpRequest関数を呼び出すためにここでクロージャが必要なのはなぜですか？

Question

私はこのサイトでかなり新しいです。

function changeForm(i) { 
    if (selection[i-1] != 0) { 
     xmlhttp = new XMLHttpRequest(); 
     xmlhttp.onreadystatechange = function() { 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
       document.getElementById("box"+i).innerHTML = xmlhttp.responseText; 
      } 
     }; 
     xmlhttp.open("POST", "fetchLineChoice_addData.php", true); 
     xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
     xmlhttp.send("index="+i+"&lc="+selection[i-1]); 
    } else { 
     document.getElementById("box"+i).innerHTML = ""; 
    } 
} 

for (var i = 1 ; i < 4 ; i++) { 
    changeForm(i); 
} 

と

for (var i = 1 ; i < 4 ; i++) { 
    if (selection[i-1] != 0) { 
     xmlhttp = new XMLHttpRequest(); 
     xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
       document.getElementById("box"+i).innerHTML = xmlhttp.responseText; 
      } 
     }; 
     xmlhttp.open("POST", "fetchLineChoice_addData.php", true); 
     xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
     xmlhttp.send("index="+i+"&lc="+selection[i-1]); 
    } else { 
     document.getElementById("box"+i).innerHTML = ""; 
    } 
} 

：

を、私は次の2つのコードブロック間の違いを理解していない：私は次のようにループのために複製されるのXMLHttpRequestで作業するときに質問があります

私は本当に最初のものがなぜ機能するのか分かりませんが、2番目のものはなぜか分かりません。私は閉鎖についてネットで検索しようとしましたが、これらの2を思い付いています

Calling a XMLHttpRequest continuously

JavaScript closure inside loops – simple practical example

2番目の質問から、関数が変数にバインドされていることを述べました。 iはこの機能の外にあります。 2番目のコードブロック（動作しません）を知りたいのですが、の値がになる前にforループの内容が完全に実行されない理由を知りたいのですが？ 2つのコードブロックが実行されているときのフローは何ですか？

ありがとうございました！

Answer 1

"i"の値が上書きされないため、最初のものが機能します。それは「閉鎖され」、実行中は同じままです。

2番目の例では、反復処理によってXMLHttpRequestが生成されますが、グローバル値 "i"が変更されます。要求が完了するまでには、もはやあなたが期待している "i"の値を指していません。