如何判断多个Jquery.ajax全部请求完毕？

Question

想在网页数据加载完成之前显示loading，待所有数据加载完成清除loading，一个页面有多个ajax异步请求，怎么判断全部请求都完成了？

Answer 1

添加一个计数，ajax请求完成后计数+1，并在每次请求完成后都判断计数是否为所有ajax的数量，满足就清除loading

(function () {
  var count = 0;
  var result = {};

  $.get('http://data1_source', function (data) {
    result.data1 = data;
    count++;
    handle();
    });
  $.get('http://data2_source', function (data) {
    result.data2 = data;
    count++;
    handle();
    });
  $.get('http://data3_source', function (data) {
    result.data3 = data;
    count++;
    handle();
    });

  function handle() {
    if (count === 3) {
      var html = fuck(result.data1, result.data2, result.data3);
      render(html);
    }
  }
})();

Answer 2

想到的有2种方法
一种是使用jquery自带的when

$.when($.ajax(), $.ajax()).then(function(){
    // 结束
})

还有一种是设置全局变量

var ajaxCount = 10 ; 
var ajaxFinished = function(){
    if(ajaxCount > 0){// do nothing}
    else{
      // 请求全部完成，做该做的事情
    }
}

$.ajax(xxx1).then(function(){
  ajaxCount --; 
  ajaxFinished(); 
});
$.ajax(xxx2).then(function(){
  ajaxCount --; 
  ajaxFinished(); 
})
// ...

Answer 3

你都异步了，为啥还用loading，前后矛盾啊。

Answer 4

var d1 = $.Deferred();
var d2 = $.Deferred();
 
function async1(){
    d1.resolve( "Fish" );
}
 
function async2(){
    d2.resolve( "Pizza" );
}
 
$.when( d1, d2 ).done(function ( v1, v2 ) {
    console.log( v1 + v2 + '已完成');
});

浅谈js中多并发的一些处理方法

Answer 5

jquery支持promise啊

$.when($.ajax("..."), $.ajax("..."))
　.done(function(){ alert("Success"); })
　.fail(function(){ alert("Error"); });

Answer 6

(function () {
  var count = 0;
  var result = {};

  $.get('http://data1_source', function (data) {
    result.data1 = data;
    count++;
    if (count === 3) {
        handle();
    }
    });
  $.get('http://data2_source', function (data) {
    result.data2 = data;
    count++;
    if (count === 3) {
        handle();
    }
    });
  $.get('http://data3_source', function (data) {
    result.data3 = data;
    count++;
    if (count === 3) {
        handle();
    }
    });

  function handle() {
      var html = fuck(result.data1, result.data2, result.data3);
      render(html);
  }
})();