Calling Ajax while using the for loop in the outer layer can lead to confusion.

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

For example, the order of six pieces of data is 123456, and now the execution order may be 135246. In this way, for example, if you want the outer Ajax to get the title and then match the corresponding content in the inner layer, there will be confusion. One is that there will be problems in the content of Title matching. In addition, the order of presentation will be wrong.

The solution is to use recursion, which can help you call Ajax in the right order, and the index at each step of recursion is also correct.

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'>No relevant information</p>";
                                                }else{
                                                    jianyan="<p class='hospitalTitle'>"+result.recentResult[t].itemName+"("+result.recentResult[t].itemId.split('_')[1]+")</p><table><thead><tr><th class=\"wd33\">Result value</th><th class=\"wd33\">Company</th><th class=\"wd33\">Reference range</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="nothing";
                                                    }
                                                    if(result1.detail[j].reportValue==null || result1.detail[j].reportValue=="null" || result1.detail[j].reportValue==""){
                                                        result1.detail[j].reportValue="nothing";
                                                    }
                                                    if(result1.detail[j].unit==null || result1.detail[j].unit=="null" || result1.detail[j].unit==""){
                                                        result1.detail[j].unit="nothing";
                                                    }
                                                    jianyan+="<tr><td>"+result1.detail[j].itemDetail+"<br/>"+result1.detail[j].reportValue+"</td><td>"+result1.detail[j].unit+"</td><td>Normal value range:"+result1.detail[j].refRange+"</td></tr>";
                                                }
                                                
                                                
                                                jianyan+="</table><br/><br/><br/>";

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

                                        });

                                    }

getResult is a recursive function and t is a variable. This function also has an Ajax outer layer. Result is the result of the outer layer. result1 is the result of the inner layer data. Recentresult [t]. Itemname is carried out in order according to the title after recursion. Of course, the content of the inner Ajax of the call is also correct.

Reference resources: https://blog.csdn.net/yuan882...