Detailed explanation of the problem of sending AJAX requests in JavaScript for loop_jquery

First of all, it is rare that this problem occurs because there are too many better solutions. When doing ajax today, an interesting thing is that a get request must be sent in each iteration. Because the iteration speed is too fast, the next iteration will be carried out before a request is completed. On chrome and ff, except for the last one Except for the request, all other requests have been cancelled. So what to do? Set a delay (not so good) or some other way?
There are many ways, such as setting sleep, iteration, etc. I use two other solutions.
1. Synchronous ajax request , and ajax request is asynchronous by default, so it should be set to false.

function creatXMLHttpRequest() {
 var xmlHttp;
 if (window.ActiveXObject) {
 return xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 } else if (window.XMLHttpRequest) {
 return xmlHttp = new XMLHttpRequest();
 }
}
function disButton(name, actionName, resquestParmName) {
 var path = document.getElementById("path").value;
 var xmlHttp = creatXMLHttpRequest();

 var invoiceIds = new Array();
 invoiceIds = document.getElementsByName(name);
 // 迭代的速度快于发送请求+收到回复的时间 所以一次get请求都还没有完成就进行了下一次请求
 for (i = 0; i < invoiceIds.length; i++) { 
 var invoiceId = invoiceIds[i].value;
 var url = path + "/" + actionName + ".action&#63;" + resquestParmName + "="
  + invoiceId;
 xmlHttp.onreadystatechange = function() {
  if (xmlHttp.readyState == 4) {
  if (xmlHttp.status == 200) {

   var result = xmlHttp.responseText;
   if (result == "0") {
   document.getElementById("btn" + invoiceId).disabled = "disabled";
   }
  }
  }
 }
 xmlHttp.open("GET", url, false);
 xmlHttp.send(null);
 } 
}

In this way, using synchronous ajax request, you will wait for the server to respond, execute the code, and then continue to iterate. But it seems that this is not recommended.

2. Use an asynchronous method , but remember that a new XMLHttpRequest object must be created for each iteration and cannot be reused.

function creatXMLHttpRequest() {
 var xmlHttp;
 if (window.ActiveXObject) {
 return xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 } else if (window.XMLHttpRequest) {
 return xmlHttp = new XMLHttpRequest();
 }
}
function disButton(name, actionName, resquestParmName) {
 var xmlHttp;
 var path = document.getElementById("path").value;
 var invoiceIds = new Array();
 invoiceIds = document.getElementsByName(name);
 // 迭代的速度快于发送请求+收到回复的时间 所以一次get请求都还没有完成就进行了下一次请求
 for (i = 0; i < invoiceIds.length; i++) { 
 xmlHttp = creatXMLHttpRequest();
 var invoiceId = invoiceIds[i].value;
 var url = path + "/" + actionName + ".action&#63;" + resquestParmName + "="
  + invoiceId;
 fu(xmlHttp,url,invoiceId);
 } 
}
function fu(xmlHttp,url,invoiceId){
 xmlHttp.onreadystatechange = function() {
 if (xmlHttp.readyState == 4) {
  if (xmlHttp.status == 200) {
  
  var result = xmlHttp.responseText;
  if (result == "0") {
   
   document.getElementById("btn" + invoiceId).disabled = "disabled";
  }
  }
 }
 }
 //
 xmlHttp.open("GET", url, true);
 xmlHttp.send(null);
}

Since the JS for loop and ajax run asynchronously, the for loop ends but ajax has not yet been executed. If an asynchronous request method is used, if a new XMLHttpRequest is made during each iteration, each request can be completed, but the result is still inaccurate, and some programs have not been executed.
Understand, it turns out that each iteration is to execute a few lines of code. The code for sending asynchronous ajax requests should be placed in a function, and this function should be called every iteration. That's it.
In terms of performance, For this iterative ajax request, it seems that the synchronous method has higher performance.

This problem has been solved and my understanding of ajax and http has been deepened.
The above introduces the problem of sending AJAX requests in the JavaScript for loop. I hope it will be helpful to friends who are interested in Javascript tutorials.