.show() .hide() 和 ajax 调用

Question

我的 .cshtlm 表单中有一个 js 函数，我可以通过按钮调用它。
我的函数隐藏按钮，显示进度条，调用2个ajax，隐藏进度条最后显示消息。
JS函数代码

var CustomsBook = function () {
 var month = $("#month").val();
 var message = "";
 var errorMessage = "";
 $("#btn").hide();
 $("#prcs").show();
 $("#progressbar").show();
 $("#successMessage").empty().hide();
 $("#dangerMessage").empty().hide();
 $.ajax({
  async: false,
  url: "/Logistics/jCustomsBookHQ",
  type: "POST",
  data: { month: month },
  success: function (HQresponse) {
   if (HQresponse.success) { message += HQresponse.message; }
   else { errorMessage += HQresponse.message; }
  }
 });
 $.ajax({
  async: false,
  url: "/Logistics/jCustomsBookBr",
  type: "POST",
  data: { month: month },
  success: function (BRresponse) {
   if (BRresponse.success) {
    if (message.length > 0) { message += " <br> "; }
    message += BRresponse.message;
   }
   else {
    if (errorMessage.length > 0) { errorMessage += " <br> "; }
    errorMessage += BRresponse.message;
   }
  }
 });
 $("#prcs").hide();
 $("#progressbar").hide();
 $("#successMessage").html(message);
 if (message.length > 0) {
  $("#successMessage").show();
 }
 $("#dangerMessage").html(errorMessage);
 if (errorMessage.length > 0) {
  $("#dangerMessage").show();
 }
}

当我按下按钮调用函数时，$("#prcs").show(); 和 $("#progressbar").show(); 不起作用。如果我使用调试器并逐步运行代码，进度条会在 ajax 结束后显示并隐藏。
我尝试为每个 ajax 编写 2 个不同的函数，并将 ajax 代码替换为对具有相同结果的函数的调用。
我错过了什么吗？
提前感谢您的每一个帮助。

Answer 1

如果您希望在单击按钮后显示某些内容，并且该按钮正在触发 ajax 请求，请将下面的代码放在 success: function (BRresponse) { 括号内，而不是放在 ajax 请求之外。

 $("#prcs").hide();
 $("#progressbar").hide();
 $("#successMessage").html(message);
 if (message.length > 0) {
  $("#successMessage").show();
 }
 $("#dangerMessage").html(errorMessage);
 if (errorMessage.length > 0) {
  $("#dangerMessage").show();
 }

Answer 2

删除这个：

async: false,

您的浏览器应该会在调试控制台上向您发出警告消息，说明该功能已被弃用。但更重要的是，您明​​确告诉浏览器同步执行异步操作，所有这些都在一个线程上。这意味着在所有这些操作完成之前，用户界面无法更新。

允许异步操作是异步的，以便 UI 可以在操作期间更新。在这些操作之后需要发生的任何事情都应该在它们的回调中调用，而不仅仅是放在代码中它们的下方。

简而言之，async: false 是您不需要、不想要并且应该完全避免的拐杖。无论您试图通过使用它来解决什么问题都没有得到解决，它只是被一个新问题所掩盖。

---

编辑：特别是在你的代码中，所有这些都应该在success处理函数中，不是在$.ajax()调用之后：

$("#prcs").hide();
$("#progressbar").hide();
$("#successMessage").html(message);
if (message.length > 0) {
  $("#successMessage").show();
}
$("#dangerMessage").html(errorMessage);
if (errorMessage.length > 0) {
  $("#dangerMessage").show();
}

例如：

$.ajax({
  url: "/Logistics/jCustomsBookBr",
  type: "POST",
  data: { month: month },
  success: function (BRresponse) {
    if (BRresponse.success) {
      if (message.length > 0) { message += " <br> "; }
      message += BRresponse.message;
    } else {
      if (errorMessage.length > 0) { errorMessage += " <br> "; }
      errorMessage += BRresponse.message;
    }
    $("#prcs").hide();
    $("#progressbar").hide();
    $("#successMessage").html(message);
    if (message.length > 0) {
      $("#successMessage").show();
    }
    $("#dangerMessage").html(errorMessage);
    if (errorMessage.length > 0) {
      $("#dangerMessage").show();
    }
  }
});