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

【问题标题】：Show a loading bar using jQuery while making multiple AJAX request在发出多个 AJAX 请求时使用 jQuery 显示加载栏
【发布时间】：2012-12-19 02:28:41
【问题描述】：

我有使用 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 调用。我也试过在函数开头显示加载，在函数结尾隐藏，但失败了。

如何做到这一点？

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

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

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

或者你可以使用 beforeSend 和 on Complete

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

【讨论】：

【解决方案2】：

您究竟是如何尝试加载的？在元素上使用 ajaxStart/ajaxStop 事件是完成您想要的事情的一种方法。它可能看起来像这样：

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

也许这对你有帮助，我以前经常使用它，它就像一个魅力..

【讨论】：

我认为这是最简单的解决方案。人们为什么不投票:) 谢谢！

【解决方案3】：

您可以尝试这样的事情：使用计数器定义一个回调，并且该回调在调用所需的次数后隐藏图像。

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()。

【讨论】：

【解决方案4】：

我认为答案实际上是其中几个的组合。我会从 ajax start 开始，在 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.
  }
});

【讨论】：