<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li class="list"></li>
<li class="list"></li>
<li class="list"></li>
<li class="list"></li>
<li class="list"></li>
<li class="list"></li>
<li class="list"></li>
<li class="list"></li>
<li class="list"></li>
<li class="list"></li>
</ul>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
var arr=document.getElementsByClassName("list")
var m=0;
for(var i = 0 ; i < arr.length; i++){
// m++;
// console.log(m)
// console.log(arr)
// arr[i].innerHTML="这是列表"
// console.log(arr[i])
$.ajax({
type:"get",
url:"new_file.json",
async:true,
success:function(data){
console.log(i);
console.log(data)
}
});
}
function fn(){
}
</script>
</html>
代码如上，需求是 进行一个for 循环， 每循环一次，然后发送一次ajax 请求，得到数据并打印
但事实情况是得到的i值只是最后一次的循环的最终结果，原因是因为ajax 是异步的请求，而for 循环
是同步的，所以 同步执行的时间永远快于异步执行的时间，因此它只会得到for循环最终的结果，
这个时候 我们需要采取的办法就是把ajax 请求封装 成一个函数， 然后在for循环里面做这个函数的执行 就可以解决问题了
例子如下：
//图片加载window.onload = function() { var dataUrl = document.getElementsByClassName("money"); function selfajax(index){ $.ajax({ type: "get",url: "***",async: true,dataType: ‘html‘,data: { url: dataUrl[index].dataset.adress },success: function (data) { dataUrl[index].innerHTML = data; } }) } for(var i =0; i<dataUrl.length;i++){ selfajax(i); }}这样进行一次函数的封装 就可以完美的解决问题了
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
