For循环中使用XMLHttpRequest的同步和异步方法

问题描述

• 在循环中使用XMLHttpRequest()创建ajax来对网址中的html文件的dom元素进行获取，由于XMLHttpRequest()的‘get’请求是一个耗时操作，常会出现对当前网址的dom操作尚未结束就加载了下一个网址，产生的直接结果就是“仅有最后一个网址得到了实现”。过程中的请求全都被跳过了
• 为此，大佬提供了解决方案——详解JavaScript for循环中发送AJAX请求问题
  精简为如下两种：

同步方法

var path = document.getElementById("path").value;
var xmlHttp = new XMLHttpRequest()
for (var i = 0; i < urlList.length; i++) { 
  xmlHttp.onreadystatechange = function() {
    if(xmlHttp.readyState == 4){
      // 执行你的代码
    }
  }
  xmlHttp.open("GET", urlList[i], false);
  xmlHttp.send(null);
}

• 同步方法虽然能够实现循环加载数据的操作，但是非常耗时且会对程序造成阻塞，因此不推荐

异步方法

function disButton(name, actionName, resquestParmName) {
  var xmlHttp;
  for (var i = 0; i < urlList.length; i++) { 
    xmlHttp = new XMLHttpRequest();
    xmlGetData(xmlHttp,urlList[i]);
  } 
}
function xmlGetData(xmlHttp,url){
  xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4) {
      // 你的代码
    }
  }
  xmlHttp.open("GET", url, true);
  xmlHttp.send(null);
}

• 注意 ，一定要将执行代码单独封装为一个独立的函数，让程序执行时不断的创建新的XMLHttpRequest()对象以防止执行覆盖的问题出现

运行速度测试

• 为了直观看出执行速度的差异，选用包含100个子链接的网页进行测试，测试结果如下：
• 采用同步执行方法共耗时8501ms
• 采用异步执行方法共耗时3282ms
• （以上数据均在连续10次测试中取时间最长的一次结果进行记录）执行结果附在下方：
• 同步执行：

main.js:96 1661246119250
main.js:96 1661246119406
...
main.js:96 1661246127669
main.js:96 1661246127751

• 异步执行：

main.js:44 1661246537493
main.js:44 1661246537613
...
main.js:44 1661246540711
main.js:44 1661246540775