Javascript 在发出多个AJAX请求时使用jQuery显示加载栏

我使用jQuery生成多个AJAX请求的功能如下：

function() {
    $.ajax({
        url: "/url",
        data: {
            params: json_params,
            output: 'json'
        },
        async: false,
        success: function(res) {
            data1 = res
        }
    });

    $.ajax({
        url: "/url",
        data: {
            params: json_params,
            output: 'json'
        },
        async: false,
        success: function(res) {
            data2 = res;
        }
        return data1 + data2;
    });
}

当这个函数运行和数据加载时，我想显示一个加载图像而不阻塞它

我曾尝试使用ajaxSend ajaxComplete显示加载图标，但不起作用，因为我有多个ajax调用。 我还尝试在函数开始时显示加载，并在函数结束时隐藏，但失败了

---

如何执行此操作？

您应该能够绑定到开始，然后以以下内容结束：

$('#loading-image').bind('ajaxStart', function() {
    $(this).show();
}).bind('ajaxStop', function() {
    $(this).hide();
});

或者您可以在发送前和完成后使用

$.ajax({
    url: uri,
    cache: false,
    beforeSend: function() {
        $('#image').show();
    },
    complete: function() {
        $('#image').hide();
    },
    success: function(html) {
        $('.info').append(html);
    }
});

---

你到底是怎么装的？在元素上使用ajaxStart/ajaxStop事件是实现所需功能的一种方法。它可能是这样的：

$('#loadingContainer')
.hide()  // at first, just hide it
.ajaxStart(function() {
    $(this).show();
})
.ajaxStop(function() {
    $(this).hide();
})
;

---

也许这对你有帮助，我以前经常使用它，它就像一个符咒。

你可以尝试这样的方法：定义一个带有计数器的回调，回调在调用所需次数后隐藏图像

showLoadingImage();

var callbackCount = 0;
function ajaxCallback() {
  ++callbackCount;
  if(callbackCount >= 2) {
    hideImage();
  }
}

$.ajax({
  url:"/url", 
  data: {params:json_params,output:'json'},
  async: false,
  success: function (res) {
    data1=res
    ajaxCallback();
  }
});

$.ajax({
  url:"/url", 
  data: {params:json_params,output:'json'},
  async: false,
  success: function (res) {
    data2=res;  
    ajaxCallback();
  }
});

---

不过，这只是异步调用所必需的。按照这样做的方式（所有AJAX调用都是同步的），您应该能够在外部函数结束时返回之前调用hideImage（）。

我认为答案实际上是这些函数的组合。我将从ajax开始，在0处显示加载图像（或您希望开始的位置）。然后，我将使用回调函数增加加载栏并重新绘制它

比如说

 //when ajax starts, show loading div
$('#loading').hide().on('ajaxStart', function(){
    $(this).show();
});
//when ajax ends, hide div
$('#loading').on('ajaxEnd', function(){
    $(this).hide();
});
function ajax_increment(value) {
    //this is a function for incrementing the loading bar
    $('#loading bar').css('width', value);
}

//do ajax request
$.ajax({
  url:"", //url here 
  data: {params:json_params,output:'json'},
  async: false,
  success: function (res) {
    data1=res
    ajax_increment(20); //increment the loading bar width by 20
  }
});

$.ajax({
  url:"", //url here 
  data: {params:json_params,output:'json'},
  async: false,
  success: function (res) {
    data1=res
    ajax_increment($('loading bar').css('width') + 10); // a little more dynamic than above, just adds 10 to the current width of the bar.
  }
});

---

我认为这是最简单的解决办法。为什么人们不投票呢：）谢谢！