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

最新推荐文章于 2023-02-24 14:49:03 发布

weixin_30389003

最新推荐文章于 2023-02-24 14:49:03 发布

阅读量156

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/shuangjiang/p/9593277.html

版权

<!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);
    }



}
这样进行一次函数的封装 就可以完美的解决问题了

转载于:https://www.cnblogs.com/shuangjiang/p/9593277.html

weixin_30389003

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
for 循环与ajax 中存在的异步问题

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li class="list"></li> <li class="li...
复制链接

扫一扫