每次使用 jQuery 进行新的 ajax 调用时，如何显示“加载微调器”？答案

【问题标题】：How to show the "loading spinner" every time a new ajax call is made with jQuery?每次使用 jQuery 进行新的 ajax 调用时，如何显示“加载微调器”？
【发布时间】：2019-01-31 14:10:18
【问题描述】：

我想在每次执行 ajax 调用时显示加载图标/图像。 在我的情况下，我的代码，图像显示一次，就是这样。即使for循环中有多个ajax调用，图像显示一次，并在第一个ajax调用的第一个成功状态时消失。

这是我的代码：

function ajaxCall(ajaxObject){ 
     $.ajax({
        type: 'GET',
        url: 'url/' + ajaxObject,

        beforeSend: function(){
            $("#someid").LoadingOverlay("show");
        },
        success: function (imagesList) {
            showGenerated(imagesList);
        },
        complete:function(){
            $("#someid").LoadingOverlay("hide", true);

        },
        error: function () {
            console.log('error imaging processing');
        }
    });
} 
jsObject = JSON.parse(listImages.attr("data-images"));

    for (i = 0; i < jsObject.length; i++) {
        ajaxCall(jsObject[i].filesID);
    }

我也尝试过使用$(document).ajaxStart(function(){}).ajaxStop(function(){});，但结果是一样的，“加载微调器”只显示一次，并在所有 AJAX 调用完成后消失。 ..

chrome 调试中的网络选项卡显示多个 ajax 获取请求，因此有更多的 ajax 调用，但微调器/加载似乎只是一个 ajax 调用。

所以我希望图像在每次进行新的 ajax 调用时出现和消失。

【问题讨论】：

记录beforeSend: 被击中的次数以及现在complete: 被击中的次数 - 在complete: 中，只有在为零时才隐藏它。
或者：为每个调用附加/删除一个新的加载覆盖，而不是显示/隐藏一个。
您正在快速连续拨打jsObject.length。在每个之前，都会调用以显示微调器。但是，之前的 ajax 调用可能刚刚完成并隐藏了微调器。由于所有这些都可能在几毫秒内发生，您甚至可能看不到显示/隐藏发生。
@HereticMonkey 问题是同时进行了许多 ajax 调用 - 无论是在循环中还是一个接一个地都无关紧要 - 这是极不可能的（即使是 js是单线程的）complete: 将在下一个 beforeSend: 之前被调用，但一旦第一个完成它就会隐藏加载器。
@freedomn-m 好的，我想我们在这里谈论对方。我不是在谈论任何被阻止的事情。我没有看到的是所有beforeSend 调用都在循环内调用，但complete 可以在循环外调用。这就是为什么微调器会在第一个 ajax 调用完成后立即隐藏。

标签： jquery ajax loading

【解决方案1】：

您必须为每个 ajax 调用执行此操作，在 ajax 调用中您需要显示并在获得响应后隐藏它，就像您现在正在做的那样。

另一种可能性是您需要使用以下 ajax 函数 ajaxStart 和 ajaxStop

将其添加为全局

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

你可以在这里找到文档AjaxStart

【讨论】：

试过这个$(document).ajaxStart(function(){ $("#list").LoadingOverlay("show", { image : "", fontawesome : "fa fa-cog fa-spin" }); }).ajaxStop(function(){ $("#list").LoadingOverlay("hide", true); }); 但只会在所有请求完成之前显示旋转。也许正如@HereticMonkey 所说，这一切都太快了，看不到差距，出现/消失的旋转/加载图像......
注意：bind 在 jQuery 3.0 版中已弃用。