js异步获取数据的问题

最近做js开发的时候发现了很多哥们不能区分同步和异步的区别，典型的在ajax部分，在该ajax为异步操作的时候，获取不到success之后的data的值，于是产生了各种奇葩的写法。比如创建一个局部变量再返回，然而并不觉得有什么用。还有的是将这个异步操作改成同步操作，然后获取data的值，平心而论，的确是可以这么做，不过如果这个ajax需要拉取大量的数据的时候，很容易就出现页面卡死的情况。所以，为了帮助初学者处理这个问题（减少坑爹的代码），才有了这个博客。

1：同步和异步的区别

首先，js是一个单线程的执行环境，即一次只能执行一个任务。如果有数个任务，那么这些任务会从上至下依次挨个执行。这种执行方式的好处是简单，实现也简单，缺点是这个如果有大量的任务，或者其中一个任务耗时时间很长，其他的任务暂时无法执行，就会造成浏览器无响应（俗称假死，卡死）。

针对这种情况，js出现了同步和异步的概念。"同步模式"就是上一段的模式，后一个任务等待前一个任务结束，然后再执行，程序的执行顺序与任务的排列顺序是一致的、同步的；"异步模式"则完全不同，每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。

2：ajax async：true的解决方法

对于如下代码段看这篇博客的人应该都很熟悉：

1. </pre><pre name="code" class="javascript">function getData()
2. {
3. var getdata;
4. $.ajax({
5. type:"post",
6. url:"url",
7. data:{
8. param1:param1,
9. param2:param2
10. },
11. async:true,
12. dataType:"json",
13. success:function(data){
14. getdata = data;
15. }
16. });
17. return getdata;
18. };

1. </pre><span style="white-space:pre">    </span>通过向url传param1和2的值，这个ajax操作为异步操作，成功后将data的值返回，造成了我在别处调用了这个function，就能获取这个data的值得假象，还是too young啊。当在别处调用这个function的时候，总是惊讶的发现：哎？我这边控制台明明打印出了data的值啊，为什么不能用呢？然后就是这个debug找错，找了半天也没找到，于是乎尝试着把async改成了false，后来发现还是没有什么用。</p><p><span style="font-size:12px;"></span></p><p><span style="font-size:12px;"><span style="white-space:pre">   </span>实际上，针对这种情况，推荐的一种解决方法就是传入回调函数，将依赖于这个data的各种代码放到一个回调函数里面，然后执行如下的代码</span></p><p><span style="font-size:12px;"></span><pre name="code" class="javascript">function getData(callback)
2. {
3. $.ajax({
4. type:"post",
5. url:"url",
6. data:{
7. param1:param1,
8. param2:param2
9. },
10. async:true,
11. dataType:"json",
12. success:function(data){
13. callback(data);
14. }
15. });
16. };

然后在你代码其他地方这么写：

1. //getData(callback)上面的代码
2. getData(callback);
3. //跟ajax data无关的代码

于是乎你要的data全部传到callback里面执行，而不依赖data的代码不管你这个ajax，向下接着执行。