Javascript 进行AJAX调用时未显示加载程序

我有一个JavaScript函数，它通过AJAX调用来返回一些数据，该调用在选择列表更改事件中触发

我已经尝试了很多方法在加载程序等待时显示它，因为它当前会暂停选择列表，从客户的角度来看，它看起来不是很好

问题是，无论我试图以何种方式显示，AJAX调用都会在加载程序显示之前完成

当前代码：

<select name="addresslist" class="form-select" id="edit-addresslist" onchange="selectAddress(this)">
<option value="none">-- Please select an address from the list below --</option>
//there are more options but this isn't important here       
</select>

这是我尝试过的方法之一，我也尝试过在“onchange”事件中调用一个单独的函数，在selectAddress中调用一个单独的函数，另一个函数显示加载程序，然后调用“selectAddress”，但没有任何效果，AJAX函数总是先完成，然后显示加载程序（不再需要时）

代码的其余部分完全按照预期执行

---

谢谢。

您可以尝试将AJAX代码放在setTimeout函数中，以防后端工作过快

setTimeout(function(){
    // put here your AJAX
}, 2000); // 2 seconds delay

---

它可能在稍后显示，因为您没有将css设置为在返回成功/错误后隐藏。如果您担心加载程序在ajax完成之前无法显示，可以使用setTimeout函数在ajax调用中设置延迟 这就是我要做的。 HTML-

---

您好，您应该在ajax调用中使用延迟承诺，包括done、fail和always，如果请求如此快速，甚至还应该使用settimeout检查我在本文中所做的示例，这里还有一个语法示例：

$( function() {
  function AjaxCall(rID,rStatus,rComment){
    return $.ajax({
      url: 'request.php',
      data: {
        id: rID,
        requisitionStatus: rStatus,
        comment: rComment    
      },
      type: "POST",
      cache: false,
      beforeSend: function() {
        $("#requisitionStatusDialog").dialog('close');
        $('#ajax_loader_my').show();
      }
    })
  }


  $( "#requisitionStatusDialog" ).dialog();

  $("#yourbuttonInputId").on('click',function(event) {
    AjaxCall().done(function(data,response){
      var obj = JSON.parse(data);
      if (obj.status == "success") {
        alert('whe are on done!');
      }
    }).fail(function(data,response){
      $("#updateDialog").dialog(' close');
    }).always(function(data){
      if(confirm('You have finished the request.  Click OK if you wish to continue ,click Cancel to reload the page.'))
      {
        $('#ajax_loader_my').hide();
        $("#requisitionStatusDialog").dialog('open');
      }else{
        location.reload();
      }

    });
  });
} );

希望有帮助（）

<select name="addresslist" class="form-select" id="edit-addresslist" onchange="selectAddress(this)">
<option value="none">-- Please select an address from the list below --</option>
//there are more options but this isn't important here       
</select>

function selectAddress(data) {
openloader();
var selectedAddress = data.value;
var uprn = selectedAddress.split(',')[1];

$.ajax({
    url: '~/collectiondates',
    async: false,
    data: {
        uprn: uprn
    },

    success: function (data) {
        closeloader();
        result = data;
    }
 }
 }

function openloader(){
    $("#overlay-loader").show();
}

function closeloader(){
    $("#overlay-loader").hide();
}

$( function() {
  function AjaxCall(rID,rStatus,rComment){
    return $.ajax({
      url: 'request.php',
      data: {
        id: rID,
        requisitionStatus: rStatus,
        comment: rComment    
      },
      type: "POST",
      cache: false,
      beforeSend: function() {
        $("#requisitionStatusDialog").dialog('close');
        $('#ajax_loader_my').show();
      }
    })
  }


  $( "#requisitionStatusDialog" ).dialog();

  $("#yourbuttonInputId").on('click',function(event) {
    AjaxCall().done(function(data,response){
      var obj = JSON.parse(data);
      if (obj.status == "success") {
        alert('whe are on done!');
      }
    }).fail(function(data,response){
      $("#updateDialog").dialog(' close');
    }).always(function(data){
      if(confirm('You have finished the request.  Click OK if you wish to continue ,click Cancel to reload the page.'))
      {
        $('#ajax_loader_my').hide();
        $("#requisitionStatusDialog").dialog('open');
      }else{
        location.reload();
      }

    });
  });
} );