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

 

1:同步和异步的区别

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

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

 

2:ajax async:true的解决方法

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



[javascript]  view plain  copy

 


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


 



[javascript]  view plain  copy

 


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. "post",  
5. "url",  
6.     data:{  
7.         param1:param1,  
8.         param2:param2  
9.     },  
10. true,  
11. "json",  
12. function(data){  
13.     callback(data);  
14.     }  
15. });  
16. };


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

 



[javascript]  view plain  copy

 


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


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