循环调用Ajax，异步引起顺序错乱的问题

在外层使用for循环时再去调用Ajax就会导致顺序错乱。

for(var i=0;i<result.recentResult.length;i++){
    $.ajax({
            });
}

比如6条数据顺序正常是123456，现在执行顺序可能是135246。这样一来，比如你想外层的Ajax得到标题以后再在内层匹配相应内容就会出现错乱。一个是标题匹配内容会有问题，另外，展示的顺序也会出错。

解决方案是使用递归，递归可以帮助你正确的顺序去调用Ajax，在递归每一步的索引也是正确的。

function getResult(){

                                        if(currentIndex>=result.recentResult.length){ 

                                            return;

                                        }

                                        $.ajax({

                                            type:"POST",
                                            url: remoteIp + "i/people/checkresult/getTestDetail.do",
                                            data:{
                                                itemId:result.recentResult[currentIndex].itemId,
                                                type:"0",
                                                hospitalCode:"1",
                                                instrumentType:"",
                                                checkDate:result.recentResult[currentIndex].itemId.split('_')[1]
                                            },
                                            dataType:"json",
                                            beforeSend: function (XMLHttpRequest) {XMLHttpRequest.setRequestHeader("Authorization", decodeURIComponent(getCookie("token")).replace(/\n|\r|(\r\n)|(\u0085)|(\u2028)|(\u2029)/g, "").replace(" ", ""));},
                                            
                                            success:function(result1){
                                                currentIndex++;
                                                console.log(result.recentResult[t].itemName);
                                                console.log(result1);
                                                if(result1.detail.length==0){
                                                    jianyan+="<p class='hospitalTitle'>"+result.recentResult[t].itemName+"("+result.recentResult[t].itemId.split('_')[1]+")</p><p class='noText'>暂无相关信息</p>";
                                                }else{
                                                    jianyan="<p class='hospitalTitle'>"+result.recentResult[t].itemName+"("+result.recentResult[t].itemId.split('_')[1]+")</p><table><thead><tr><th class=\"wd33\">结果值</th><th class=\"wd33\">单位</th><th class=\"wd33\">参考范围</th></tr></thead><tbody>";
                                                }
                                                for(var j=0;j<result1.detail.length;j++){
                                                    if(result1.detail[j].refRange==null || result1.detail[j].refRange=="null" || result1.detail[j].refRange==""){
                                                        result1.detail[j].refRange="无";
                                                    }
                                                    if(result1.detail[j].reportValue==null || result1.detail[j].reportValue=="null" || result1.detail[j].reportValue==""){
                                                        result1.detail[j].reportValue="无";
                                                    }
                                                    if(result1.detail[j].unit==null || result1.detail[j].unit=="null" || result1.detail[j].unit==""){
                                                        result1.detail[j].unit="无";
                                                    }
                                                    jianyan+="<tr><td>"+result1.detail[j].itemDetail+"<br/>"+result1.detail[j].reportValue+"</td><td>"+result1.detail[j].unit+"</td><td>正常值范围:"+result1.detail[j].refRange+"</td></tr>";
                                                }
                                                
                                                
                                                jianyan+="</table><br/><br/><br/>";

                                                theResult.innerHTML += jianyan;
                                                jianyan="";
                                                t++;
                                                
                                                getResult();
                                            }

                                        });

                                    }

getResult是递归函数，t是变量。这个函数外层还有一个Ajax。result就是外层的结果，result1是内层数据result.recentResult[t].itemName 按照递归以后的标题就是按顺序进行的了。调用的内层Ajax的内容当然也是正确的。

参考：https://blog.csdn.net/yuan882...