jquery下for循环ajax请求，将每次的返回结果显示在页面中，居然只有最后一次生效了！

最新推荐文章于 2023-11-27 11:39:47 发布

流水彷徨&

最新推荐文章于 2023-11-27 11:39:47 发布

阅读量646

点赞数

文章标签： ajax jquery javascript

本文链接：https://blog.csdn.net/z_c_ww/article/details/129918045

版权

文章描述了一个前端开发者遇到的问题，即在使用Ajax进行同步请求时，预期在for循环中依次显示0到4的结果，但实际上所有请求完成后只显示了4。尽管同步请求应该是阻塞的，但页面渲染并未按预期进行。在shuchu函数中添加console.log(id)能正常打印每个循环的id，但更新DOM却只在最后执行一次。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="start">发起请求</button>
    <button id="end">停止请求</button>
    <p id="value">返回值:<span></span></p>
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        var status = 1;

        $("#start").click(function () {
            for (var i = 0; i < 5; i++) {
                $.ajax({
                    url: "http://43.135.175.137:8787/index/index?id=" + i,//传什么返回什么
                    dataType: "json",
                    async: false,
                    success: function (data) {

                        shuchu(data.id);
                    }
                });
                $("#value span").html(i);
            }
        });

        function shuchu(id) {
            $("#value span").html(id);
        }
    })

</script>

</html>

在使用for循环进行ajax同步模式请求，将每次循环时请求出来的结果渲染到页面上，但是居然出问题了！作为一个前端不扎实的后端来说，俺emo了，没有按照我的想法，在span标签内进行 0，1，2，3，4进行输出。而是在所有的请求结束后，“duang” 出现了一个 4 ！！，wc 我顿时就傻眼了。

据我了解，ajax同步是阻塞模式，所以按道理来讲，下一次循环应该在shuchu函数执行完成之后再进行呢，但是并没有

假设我现在在shuchu函数加一行代码,console.log(id)，他竟然能生效，会伴随着每一次的循环打印出来，当场傻掉！！！

function shuchu(id) {
   console.log(id);//立即执行
  $("#value span").html(id);//最后一次循环才执行
}

请求大佬解答！！！！

流水彷徨&

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
4
评论
jquery下for循环ajax请求，将每次的返回结果显示在页面中，居然只有最后一次生效了！

jquery下for循环aja同步x请求，将每次返回结果显示在页面中，居然只有最后一次生效了！
复制链接

扫一扫