ajax的async异步操作场景

   今天在项目中遇到一个问题，需要在遍历的情况下调用ajax，然后一直出现每次就保留了最后一次ajax的请求结果，一开始我一直怀疑是我的for写错了导致的，但是检查来检查去 确认的确是多次调用了ajax的后台请求，最后在前端页面断点发现，原因出在执行顺序的问题上面 下面是js代码：

for(var i in attc){
            for(var j in attcList){
                if(attc[i].id==attcList[j]){
                    var name=attc[i].name;
                    var code=attc[i].code;
                    $("#"+name).show();
                    jQuery.ajax({
                        type:'post',
                        url:'getCardData.htm',
                        data:{"attc_id":attcList[j],"goods_id":"$!goods.id"},
                        dataType:"Json",
                        //async:false, 这个是问题的关键点
                        success:function(data){
                            $("."+code).html("");
                            $("."+code).append("<tr><th  data-field=\"state\" data-checkbox=\"true\"></th><th  data-field=\"id\">Card Name</th><th  data-field=\"id\">Card Quantity</th><th data-field=\"name\" >Card Price</th><th  data-field=\"price\">Card Image</th></tr>");
                            for (var i = 0; i <data.length; i++) {
                                if(data[i].checked){
                                    $("."+code).append("<tr><td class=\"bs-checkbox\"><input data-index="+i+" name=\"btSelectItem\" type=\"checkbox\" checked=\"true\"></td><td><input disabled value="+data[i].attc_name+" class=\"form-control batch-origin-price\" name=\"\"/><input type=\"hidden\" name=\"attcId\" value="+data[i].attc_id_str+"></td></td><td><input disabled value="+data[i].attc_number+" class=\"form-control batch-origin-price\" name=\"\"/></td><td><input  value="+data[i].attc_price+" class=\"form-control batch-origin-price\" name=\"attcPrice\"/></td><td><img width='70px' height='50px' src="+data[i].pic_logo+" name=\"promoPrice"+"\"/></td></tr>");
                                }else{
                                    $("."+code).append("<tr><td class=\"bs-checkbox\"><input data-index="+i+" name=\"btSelectItem\" type=\"checkbox\" ></td><td><input disabled value="+data[i].attc_name+" class=\"form-control batch-origin-price\" name=\"\"/><input type=\"hidden\" name=\"attcId\" value="+data[i].attc_id_str+"></td></td><td><input disabled value="+data[i].attc_number+" class=\"form-control batch-origin-price\" name=\"\"/></td><td><input  value="+data[i].attc_price+" class=\"form-control batch-origin-price\" name=\"attcPrice\"/></td><td><img width='70px' height='50px' src="+data[i].pic_logo+" name=\"promoPrice"+"\"/></td></tr>");
                                }
                            }
                        }
                    });
                }
            }
        }
    }

 

该段代码主要是编辑的时候展示附件信息数据 ，例如该商品添加了多条附件，页面的效果始终都是只有最后一条附件信息。

页面一直都是展示最后一个附件的分类信息。

最后在前端断点发现 执行顺序是循环先全部走完了 最后才会走循环里面的ajax请求，所以就会导致后面的覆盖前面的情况。通过查找资料，发现在这样的情况下加上 同步 async:false  即可  默认是true(异步为true，同步为false)

     加上了之后 页面的显示结果就是想要的结果了 如下：