Ajax系列之异步调用导致的不同步问题

业务场景：点击一个按钮的时候保存数据，同时打开一个弹窗带出保存的数据

基于这样的业务场景，最近遇到一个问题，是在ie11才发现的，点击按钮时候，后台打断点加数据库查询都验证数据是保存正确的，不过已经保存的数据是带不到弹窗页面的，问题比较奇怪，排查了挺长时间，最开始因为在ie才能重现的问题，在极速模式的360浏览器是没问题的，而且第一次点击时候没带出数据，第二次点击时候才可以带出数据，然后很容易让人联想到ie的缓存问题，不过调了大半天
加上ajax不缓存的代码，已经改成post请求，或者get请求连接后面加上一个时间戳参数都不奏效

$(function(){ //ajax不缓存请求结果 $.ajaxSetup({cache: false});
		});

  

 

  
1
  
2
  
3
  
4
 

然后经过和同事沟通，才发现自己跟错了方向，经过检查发现保存的方法是用异步的，问题就出现在这里了，首先验证是不是由于异步导致的，在保存数据代码和打开弹窗页面的代码之间加一个alert提示，发现果然，关联alert弹窗提示之后，数据正常带出，所以确定是因为异步导致的

保存的代码，注意async:true,，这里是异步的，之前可能是考虑性能问题，改成异步的

$.ajax({ url:'${root}/saveOrUpdate.do', type:"post", async:true, success:function(result){ ... }
		});  

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
 

所以经过一番调试，给出自己的方案，解决方法是用回调函数：

保存函数：

function saveRecord(seq,callback){
	$.ajax({ url:'${root}/saveOrUpdate.do', type:"post", async:true, success:function(result){ if(callback!=undefined){ callback(true); } }
		});  
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
 

 //保存成功，才会打开弹窗 function main(seq){ saveRecord(seq,callbackFunction); } /*保存时的回调函数*/ function callbackFunction(saveSuccess){ if(saveSuccess){ //省略打开弹窗代码 } }


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
 

文章来源: smilenicky.blog.csdn.net，作者：smileNicky，版权归原作者所有，如需转载，请联系作者。

原文链接：smilenicky.blog.csdn.net/article/details/100044661