for 循环与ajax 中存在的异步问题

发布时间：2020-12-16 03:02:20 所属栏目：百科来源：网络整理

导读：!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"/

<!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);    }}这样进行一次函数的封装 就可以完美的解决问题了

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!