时间戳

首页 > 解决方案 > .show() .hide() 和 ajax 调用

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

问题描述


我的 .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 代码替换为对具有相同结果的函数的调用。
我错过了什么吗？
提前感谢您的每一个帮助。

标签： javascriptjquery

解决方案

删除这个：

async: false,

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

允许您的异步操作是异步的，以便 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();
    }
  }
});

推荐阅读