用Jquery的$.get方法遇见的问题

$(document).ready(function() {
var html = "<div class='tabbable tabs-left'><ul class='nav nav-tabs'>";
var html_institute = '';
var html_subject = '';
$.get("@{ViewResource.viewInstitute}",function(institute_data){
$.each(institute_data,function(commentIndex, comment){
html_institute += "<li><a href='#tab"+commentIndex+ "'data-toggle='tab'>"+institute_data[commentIndex]+"</a></li>";
var value = institute_data[commentIndex];
//alert(institute_data[commentIndex]);
//alert(html_institute);
//alert(1);---------------------------------1
$.get("@{ViewResource.viewSubject}",{
institute : value
},function(subject_data){
//alert(commentIndex);
// alert(value);
alert(html_subject);
html_subject += "<div class='tab-pane' id='tab"+commentIndex+"'>";
$.each(subject_data,function(subject_commentIndex, subject_comment){
//alert(subject_data[subject_commentIndex].subject);
html_subject += "<p>"+subject_data[subject_commentIndex].subject+"</p>";
});
html_subject += "</div>"
//alert(html_subject);
});

});
//html += html_institute + "</ul>" + "<div class='tab-content'>" + html_subject +"</div></div>";
//alert(html)
},"json");
 
});

是一个ajax的get请求过来一个数据后，然后把这个数据当做参数，在异步一次获取一个新的信息!但是发现了一个问题，就是第一个each循环会先直接执行完了，然后再执行第二个each。但是在1处加上alert这句后，程序就正常执行了！这是为什么？求大神解答!
[解决办法]
给你个无限分类列表作参考:

//生成分类列表
var s=getSubid(0,data_categroy,0);
$('#form_publish .categroy').append(s);

data_categroy里面是所有父子分类关系.例如
ID title 父的ID
1 webdeveloper 0
2 html 1
3 css 1

function getSubid(cid,data,nbsp){
var rs,s=''; 
 
for(key in data){
rs=data[key];
if(rs['cid1']==cid){
s+='<span>';
s+=$.kc_nbsp(nbsp);
s+='<input type="checkbox" name="cids" value="'+rs.cid+'" value="'+rs.cid+'" id="cid_'+rs.cid+'"/>';
s+='<label for="cid_'+rs.cid+'">'+htmlencode(rs.name)+'</label>';
s+='<em>'+htmlencode(rs.notes)+'</em>';
s+='</span>';
s+=getSubid(rs['cid'],data,nbsp+1);
}
}
return s;
}

[解决办法]
因为ajax是异步执行的，第一次ajax没有返回已经执行下一次each甚至已经执行完毕所有each了，设置为同步就行了，改为$.ajax或者设置全局ajax请求为同步的

$.ajaxSetup({async:false});/////设置全部ajax为同步的
$(document).ready(function() {
    var html = "<div class='tabbable tabs-left'><ul class='nav nav-tabs'>";
    var html_institute = '';
    var html_subject = '';
    $.get("@{ViewResource.viewInstitute}",function(institute_data){
        $.each(institute_data,function(commentIndex, comment){
            html_institute += "<li><a href='#tab"+commentIndex+ "'data-toggle='tab'>"+institute_data[commentIndex]+"</a></li>";
            var value = institute_data[commentIndex];
            //alert(institute_data[commentIndex]);
            //alert(html_institute);
            //alert(1);---------------------------------1
        $.get("@{ViewResource.viewSubject}",{
            institute : value
        },function(subject_data){
        //    alert(commentIndex);
//             alert(value);
            alert(html_subject);
            html_subject += "<div class='tab-pane' id='tab"+commentIndex+"'>";
            $.each(subject_data,function(subject_commentIndex, subject_comment){
                //alert(subject_data[subject_commentIndex].subject); 
 
                html_subject += "<p>"+subject_data[subject_commentIndex].subject+"</p>";
            });
            html_subject += "</div>"
            //alert(html_subject);
        });
         
        });
        //html += html_institute + "</ul>" + "<div class='tab-content'>" + html_subject +"</div></div>";
        //alert(html)
    },"json");
      
});

[解决办法]
应该是版主说的吧。是异步执行的，你数据还没加载完， 你加alert 的时候恰好加载完了。
[解决办法]
async = false
[解决办法]
建议去查看下ALERT的执行作用，ALERT是会中断浏览器解析接下来的代码。。所以在弹出后，之前的代码是全部执行完了的。。
JAVASCRIPT是异步执行的。