alert导致ajax数据交互问题,填坑之路——解决关于ajax异步交互函数执行顺序问题...

首先自我介绍一下，本人大四学生一枚，刚刚找到一份实习工作，很幸运的是遇到了一位特别牛的大哥带我，矫情的肉麻的话就不多说了。进入主题^_^在实际项目开发中，用javascript的ajax进行交互，遇到了一个问题：

在javascript中写了n多个方法，逻辑比较深。一般情况下，返回的值需要经过处理再使用或显示，比如：

点击调用fn1

var obj = {};

var fn1 = function(){

fn2();

alert(obj.value);

};

var fn2 = function(){

obj.value=1;

};

很正常，执行fn1()会先调用fn2()，fn2()会对obj处理，那么fn1()就会得到处理之后的obj，再进行调用等等，这是正常情况。是因为javascript执行前将方法、对象等扫描一遍存起来，需要时拿出来调用。

但是遇到ajax这条理论就行不通了，因为大家都知道ajax是异步交互的，请求到响应是与页面分开的，所以它什么时候交互到哪一步都是未知的，所以我们可以拿javascript的setTimeout()这个方法不成熟但相似地模拟ajax交互的步骤：

点击调用fn1

var obj = {};

var fn1 = function(){

fn2();

alert(obj.value);

};

var fn2 = function(){

window.setTimeout("obj.value=1", 5000);

};

上述代码将fn2()方法的方法体变了一下，意思是当执行赋值语句时，要等待5秒后执行；这样的话当点击a标签触发fn2，fn2会等待5秒赋值，所以fn1弹出的对话框里obj.value还没有赋值，导致报undefined，但是5秒后在点fn1，此时fn2的赋值语句已经执行完毕，就会显示出来1；

这样就模拟了一次调用ajax请求的示例，那么ajax的坑就在这里，你并不知道你调用它的时候它进行完了没有，如果进行完毕，那么恭喜你你很幸运；如果它发出请求还没有响应到又或者在xmlHttpRequest请求栈里排队根本没有开始发送请求，你再使用它的返回值就会报undefined了。那么如何解决呢？

其实很简单，调用fn1，就会按顺序执行fn1里面的程序，就会走到fn2，重点来了，我们最大的问题或是瓶颈就在于无发得知fn2是否调用完成，所以可以这样解决：将fn1需要使用fn2返回值的那一堆操作包起来做一个方法，当作参数传入fn2，那么在执行fn2之后判断，如果有fn，则会执行fn的代码，这样就保证了fn2的ajax可以正常请求响应，而fn也可以在fn2的值取到之后再执行fn1所需的操作了。

点击调用fn1

var obj = {};

fn = function (){

};

var fn1 = function(){

fn = function(){

alert(obj.value);

}

fn2(fn);

};

var fn2 = function(fn){

window.setTimeout("obj.value=1; if(fn){fn()}", 5000);

};

那这样就完美地解决了由于ajax的异步请求导致函数返回值取不到，进而控制函数执行顺序的问题了(特别说明：定义全局的fn仅仅是因为window.setTimeout()这个方法只能扫描到全局函数，在使用ajax请求可以直接在方法内部定义！)

最后讲一下，这是我人生第一篇博客，仅仅是分享我解决实际开发遇到的问题的小技巧，如果有分析不足的地方请原谅，有错误的地方请指正^_^