在发送同步 Ajax 请求时显示微调器答案

【问题标题】：Display a spinner while sending a sync Ajax request在发送同步 Ajax 请求时显示微调器
【发布时间】：2020-06-27 17:47:37
【问题描述】：

我需要在向服务器发送同步 Ajax 请求以检索数据时显示微调器。

我知道最好在异步模式下执行，但我不允许这样做。我也知道同步 ajax 请求会阻塞浏览器。

我已经找到了一个带有 setTimeout 的解决方案来延迟我的 ajax 请求的调用，但我的老板不希望我使用 setTimeout。

请问有什么办法可以解决我的问题吗？非常感谢！

【问题讨论】：

标签： javascript jquery ajax spinner synchronous

【解决方案1】：

您可以使用 AJAX beforeSend success error 或 complete 函数。或者您可以在 AJAX 调用之前简单地显示一个微调器并将其隐藏在您的 success 或 error 或 complete 函数中，具体取决于您的要求。

示例代码：

  $('.spinner-div').show();
  $.ajax({
  //You AJAX function
  success: function(){
     $('.spinner-div').hide();
     //Show success message
  },
  error : function(){
     $('.spinner-div').hide();
     //Show error message
  }
  });

【讨论】：

【解决方案2】：

Jquery 有一些 ajax 事件处理程序。你可以使用

$( document ).ajaxStart(function() {
  $( "#loading" ).show();
});

发送请求时显示加载图片

$( document ).ajaxComplete(function() {
  $( "#loading" ).hide();
});

在请求完成时隐藏加载图像。

参考：https://api.jquery.com/ajaxStart/ 和 http://api.jquery.com/ajaxcomplete/

【讨论】：

【解决方案3】：

ajax 请求有一个 .success() 方法。

这里有一些如何使用它的例子 jQuery: Return data after ajax call success

虽然这里有一些关于贬损的争论 Should I use .done() and .fail() for new jQuery AJAX code instead of success and error

【讨论】：

【解决方案4】：

您可以在 AJAX 调用之前简单地 show 您的微调器，然后在 AJAX 调用的 success 和 error 中 hide 它：

$('#spinner').show(); //Show your spinner before the AJAX call
$.ajax({
  url: "test.html",
  method: 'POST',
  success: function(data){
    $('#spinner').hide(); //Hide your spinner after your call
  },
  error: function(){
    setTimeout(() => { //I'm setting a setTimeout here so you have the time to see the spinner.
                       // Remove it when you copy this code.

      $('#spinner').hide(); //Hide your spinner after your call
    },2000);
  }
});

#spinner{
  display: none;
  width: 10px;
  height: 10px;
  animation: rotating 2s linear infinite;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="spinner">0</div>

【讨论】：

【解决方案5】：

您可以通过向页面呈现“静态”gif 并让您的脚本将 div 的内容替换为 AJAX 调用的结果来实现此目的。这将有效地显示“加载”图标，直到结果加载，但如果您的脚本出现错误，则 gif 将永远旋转。

            <div id="chart_score" style="width: 100%; height: 300px;">
                <div style="text-align: center; height: 100%;">
                    <br />
                    <br />
                    <br />
                    <img src="../../Img/GIF/CircleLoader.gif" />
                    <br />
                    <br />
                    Loading chart...
                </div>
            </div>

【讨论】：

【解决方案6】：

添加到上面的解决方案（我已经有了，但没有用）：

我的 ajax 调用中有async:false,，这是我从一些示例中复制的，这当然会破坏同时前端微调器更新。想一想，这很容易，但在上面的示例中没有明确显示。

所以，async:true 终于修好了。

【讨论】：