.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

刪除這個：

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();
    }
  }
});

Answer 2

如果您想在單擊按鈕后顯示某些內容，並且該按鈕正在觸發 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();
 }