日期:2014-05-16  浏览次数:20463 次

如何等待JQuery异步全部完成,再执行查询
1.功能描述:用jquery进来初始化多个查询条件,比如日期(默认当前日期),省与地市(默认省会城市)等很多条件后,等这些条件全部加载完成后再执行查询,然后页面展示查询结果。
2.发现问题:因为jquery的异步性,导致初始化的条件还没有加载完成(包括省市联动等),就直接执行了查询操作,导致查询的结果有问题。

3.需求方案:如何等待所有异步的初始化条件全部加载完成后,再执行查询。
jquery 异步 判断异步是否完成 异步与同步关联

------解决方案--------------------
var finish=0,count=3;
$.get(url1,function(){   
  if(finish==count){
       //执行全部加载后方法
  }
});
$.get(url2,function(){   
  if(finish==count){
       //执行全部加载后方法
  }
});
$.get(url3,function(){   
  if(finish==count){
       //执行全部加载后方法
  }
})

或者关联紧的改成同步方式

------解决方案--------------------
给2个笨方法
1.异步嵌套(执行一个AJAX后 等待完成 执行下一个),当为最后一个时就执行你的方法
2.给予相应标识,只有标识为真时 则标识请求完成 执行你的方法,可以去启动一个计时器 循环去判断标识状态
------解决方案--------------------
如果是jQuery1.5以上,ajax类函数返回的是deferred对象,jQ有一个方法叫when:
$.when($.get(url1),$.get(url2),$.get(url3)).done(function(){/*code here*/});
如果3次get有先后顺序,可以用pipe:
$.get(url1).pipe($.get(url2)).pipe($.get(url3)).done(function(){/*code here*/});
1.8以上,pipe被弃用,改为then:
$.get(url1).then($.get(url2)).then($.get(url3)).done(function(){/*code here*/});
意义很明显,先get url1 然后get url2 然后 get url3,做完了再执行done的内容。

详情了解 jQuery Deferred.
------解决方案--------------------
引用:

$.ajax({
    async : false //设置成为 同步的  
})

在客户端  初始化时 给张gif   用户体验应该还行吧


同步的话,即使是gif动画,也是要卡住的。
我刚刚试过了哦。
time = new Date(); while(new Date(0 - time < 5000) ; 
死循环5秒,结果页面上的gif动画都卡住了呢,5秒后又开始动了。

------解决方案--------------------
引用:
Quote: 引用:

设几个全局标识不就可以了吗?
不行,ajax里的内容触发后就接着往下执行了,待执行到查询的方法时,说不定ajax的请求还没有返回结果呢。


默认需要ajax的状态都设置为1,每个ajax查询完成后设置其状态为非loading(如0),查询前检查所有ajax请求的状态是否都完成(所有状态都要为0),不完成就不查询


------解决方案--------------------
引用:
Quote: 引用:

以1.8版本以后的为例:

function init() {
   var responseDatas = [];
   $.ajax({url:url1,dataType:'json'})
        .then(function(data){
            responseDatas.push(data);
        })