Home / Questions / 46913
Accepted
Muriano
Asked: 2020-02-01 02:14:20 +0800 CST 2020-02-01 02:14:20 +0800 CST

如何使用 jQuery 知道活动 ajax 请求的数量？

  • 772

我如何知道使用 jQuery 的活动 ajax 请求的数量？

我知道它jQuery.active赋予了这个价值，但它不起作用。

在应用程序中，我使用 jQuery 触发了一个自定义事件：

$('body').trigger('association:change');

有几个进程在等待这个事件，每个进程自己执行一个 ajax 请求，这可能会导致多个同时请求。为了向用户表明系统正在执行操作，我展示了一个“加载”类型的动画。当最后一个请求完成时，您应该隐藏此动画。直到现在，我相信

if ($.active < 1) {
    $('.loading').hide();
}

可以得到它。有没有办法知道 jQuery 未完成的 ajax 请求的数量？

javascript

3 Answers

  1. 要完成您想要的任务ajaxStop()：

    描述：

    注册一个处理程序以在所有 Ajax 请求完成时调用。

    还包括加载的开始，代码看起来像这样：

    $(document).ajaxStart(function() {
  $('.loading').show();
});
$(document).ajaxStop(function() {
  $('.loading').hide();
});

    我一直在研究 jQuery 代码的使用，jQuery.active它应该报告未完成的连接数，但这取决于您访问该属性的位置和/或时刻，它将包含您期望或不包含的内容，因为它value 在事件结束时递减，因此如果您在dedone执行期间尝试访问该值，您将不会获得更新的值（例如）。callbackdone

    顺便说一句，要保留帐户，请确保所有 AJAX 请求都附加到document：

    从 jQuery 1.9 开始，jQuery 全局 Ajax 事件的所有处理程序，包括随.ajaxStart()方法添加的处理程序，都必须附加到document.

    编辑：我已经开发了一个概念证明，您可以在其中检查我的建议是否正常工作：

    /* Eventos de comienzo y final con cambios de color */
$(document).ajaxStart(function() {
  console.log("Inicio");
  $('.loading').show();
  $('body').addClass('rojo');
});
$(document).ajaxStop(function() {
  console.log("Fin");
  $('.loading').hide();
  $('body').removeClass('rojo');
});
/* Llamadas Ajax al pulsar el texto */
var url = 'https://jsonplaceholder.typicode.com/posts/';
$('#pruebas').on('click', function() {
  $.when(
    $.get(url + '1', function(data) {
      console.log("Fin 1. Quedan: " + $.active);
    }),
    $.get(url, function(data) {
      console.log("Fin 2. Quedan: " + $.active);
    }),
    $.get(url + '3', function(data) {
      console.log("Fin 3. Quedan: " + $.active);
    })
  ).then(function() {
    console.log("Then. Quedan: " + $.active);
  });
});
    .loading {
  display: none;
}
.rojo {
  background-color: red;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pruebas">Pulse para iniciar las pruebas</div>
<div class="loading">Cargando</div>

    你也可以看看我说的。在事件执行期间，success/done计数器尚未递减，因此即使在最后一个块中，最后一个也会看到值$.active1，而不是 0 。.when()

    • 4

  2. 您可以执行以下操作：

    例如：

    // Attach to ajax events
$(document)
  .on('ajaxStart', onAjaxStart)
  .on('ajaxStop', onAjaxStop);

$('body').trigger('association:change');

// Hoisted functions

function onAjaxStart() {
  $('.loading').show();
}
function onAjaxStop() {
  $('.loading').hide();
  $(document)
    .off('ajaxStart', onAjaxStart)
    .off('ajaxStop', onAjaxStop);
}

    PD1：如果使用选项调用$.ajax()o ，则不会触发事件。$.ajaxSetup()global: falseajaxStartajaxStop

    PD2：由于您使用事件来触发动作，您可以创建一个新事件（例如：）loader:ajax，以自动显示loader.

    • 1
  3. Best Answer

    最后我用另一种方式解决了它，虽然 ajaxStart/ajaxStop 事件的选项也很有趣。

    使用 jQuery.when().then(); 我可以以一种比我以前尝试过的更清洁的方式达到我一直在寻找的目标，并且根据我的口味。

      $('body').on('association:change', function () {

        $('.loading').show(); // Aquí empezamos la animación.

        $.when(
            $.get(updateUrl1, function(data)) { // Primer elemento de tipo "deferred"
                 // some code here
                 $obj1.html(data);
                 // some code here
            }),
            $.get(updateUrl2, function(data)) { // Segundo elemento de tipo "deferred"
                 // some code here
                 $obj2.html(data);
                 // some code here
            }),
            $.get(updateUrl3, function(data)) { // Tercer elemento de tipo "deferred"
                 // some code here
                 $obj3.html(data);
                 // some code here
            })
        ).then(function(){
            $('.loading').hide();
        });

  });

    这不是我们最初寻找的解决方案，但它很好地适应了预期的结果。

    • 0