jquery ajax同步調用beforeSend

Question

我有一個叫做的函數：

function callAjax(url, data) {
 $.ajax(
   {
     url: url, // same domain
     data: data,
     cache: false,
     async: false, // use sync results
     beforeSend: function() {
       // show loading indicator
     },
     success: function() {
       // remove loading indicator 
     }
   }
  );
}

在代碼中，我多次調用“callAjax”X次，我想同步更新數據。 它按預期完成，但有一個問題：loading項目沒有顯示在beforeSend函數中。 如果我將async變為true，它可以正常工作，但更新不會同步完成。

我嘗試了幾件事但沒有成功。 我嘗試在ajax調用之前加載加載指示器，如下所示：

function callAjax(url, data) {
  // show loading div

  $.ajax(
    {
      // same as above
    }
   );
}

但由於某種原因，它不想顯示加載指標。 當我在beforeSend中輸入“alert”並且在那種情況下出現加載指示符時，我注意到一個奇怪的行為，但我寧願不彈出一個消息框。

有什么想法嗎？

Answer 1

像這樣進行同步調用就像放了一個“alert（）”框。 有些瀏覽器完全停止了他們正在做的事情，直到收到HTTP響應。

因此，在您的代碼中，在您調用“$ .ajax（）”函數開始之后，在收到響應之前沒有任何反應，並且您的代碼所進行的下一件事將是“成功”處理程序。

一般來說，除非你在你的服務器非常有信心，這是一個更好的主意，用異步調用。 當你這樣做時，瀏覽器立即返回其工作，只是在后台監聽HTTP響應。 當響應到達時，將調用您的成功處理程序。

Answer 2

當您執行阻塞I / O時，程序將停止，直到收到輸入，在執行同步調用時，JS語言中，程序停止並且瀏覽器窗口凍結（無法進行繪制），直到收到響應。 在大多數情況下，可以避免執行syncronus調用和任何類型的阻塞I / O. 但是想象一下你在java或任何其他編程語言中做進度條，你必須產生一個不同的線程來控制進度條，我想。

在你的情況下嘗試的一件事是在延遲一段時間后調用ajax調用

//loading div stuff, 
//if your doing some animation here make sure to have Sufficient 
//time for it. If its just a regular show then use a time delay of 100-200
setTimeout( ajaxCall, 500 );

在setTimeout中編輯 ajaxcall， 示例

Answer 3

這就是你要找的東西 - .ajaxStart（）

當任何ajax事件開始時它將被觸發

http://api.jquery.com/ajaxStart/

他們甚至給出了一個類似於你想要完成的具體例子：

 $("#loading").ajaxStart(function(){
   $(this).show();
 });

然后，您可以使用.ajaxStop（）函數

$("#loading").ajaxStop(function(){
      $(this).hide();
});