.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();不起作用。如果我使用调试器并逐步运行代码，进度条会在 ajaxs 结束后显示和隐藏。我尝试为每个 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();

    }

  }

});