jQuery中带有异步Ajax代码的执行顺序

1、问题

​ 在使用jQuery的时候想通过Ajax请求来放所需要的html代码中放值，但是请求回来却是空的，源代码如下：

$("a").click(function() {
    //alert("in click");
    var table = $("<table border='1' width='100%'></table>");//定义jQuery变量
    var ths = $("<tr> <th> id </th> <th> email </th> </tr>");
    var trs = "";
    $.getJSON("emps", null, function(resultJson) {
        for (var i = 0; i < resultJson.length; i++) {
            trs += "<tr> <td>" + resultJson[i].id + "</td><td>"
                + resultJson[i].email + "</td></tr>";
        }

    });

    table.append(ths);//加入表头
    alert(trs);
    table.append(trs);//加入数据
    $("div").append(table);//加入table到div中
    return false;
});

此时打印出来trs为空，结果很是尴尬。

2、解决方法：

经过仔细排查发现，在getJSON方法中又alert了一下，发现在getJSON中十分正常，这就很奇怪，不过我注意到了他们打印的先后顺序，先打印出来空的，再打印出来有值的，这也就说明了它们的先后顺序，先执行普通代码， 再执行异步请求代码，所以在放置数据的时候放在获取到数据的后一步，也就是放到getJSON方法中，改成下面代码即可：

此时可以alert出来，结果也是对的：

3、总结

​ 在jQuery代码中，先执行普通的代码，再执行异步执行代码，所以在赋值的时候，别忘记在最终的一步进行赋值，要不然会是个空值。这是我踩的一个大坑，我哭了。。。

我是福尔斯甘，如果对本篇有疑问，或者发现有什么错误之处，欢迎提出指出，觉得评论不方便的话，本人邮箱是96532354@qq.com，qq同号，欢迎共同学习讨论问题，

谢谢大家支持~~