问题描述
- 在循环中使用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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。