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次，并且要同步更新数据。这样做的效果符合预期，但有一个问题：在beforeSend函数中没有显示加载项。如果将async设置为true，则可以解决此问题，但更新不是同步完成的。

我尝试了几种方法都没有成功。我尝试在ajax调用之前放置加载指示器，如下所示：

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

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

但是不知道为什么它不显示加载指示器。我注意到当我在beforeSend中放置一个“alert”时出现了奇怪的行为，而在这种情况下加载指示器会出现，但我不想弹出消息框。

有任何想法吗？

- Daniel

---

如果您正在同步执行此操作，则浏览器会在更新页面之前等待响应。 - Pointy

即使我在ajax调用之前放置了加载指示器，它也会停止吗？我不确定它的执行路径。我假设在ajax调用之前对页面进行的任何更新都将完成。 - Daniel

这取决于浏览器，你正在测试哪个浏览器？ - Pointy

此外，如果您正在进行同步调用，则使用“beforeSend”也没有太多意义。 - Pointy

我已经在Chrome、FF和IE中尝试过了。在FF上，它按预期工作。在IE和Chrome上，它会锁定而不显示任何内容。我尝试在ajax调用之前（不是在beforeSend中，而是完全在ajax调用之外）放置加载指示器，但仍然没有显示。我会假设在ajax之前进行的任何调用都会出现在浏览器上？ - Daniel

你找到解决方案了吗？我也遇到了同样的问题..... :( - Dryadwoods

Answer 1

进行同步调用就像弹出“alert()”框一样。一些浏览器会完全停止当前的操作，直到收到HTTP响应为止。

因此，在您的代码中，在调用“$ .ajax()”函数后，直到接收到响应，什么都不会发生，并且在您的代码中下一个执行的内容将是“success”处理程序。

通常情况下，除非您对服务器非常自信，否则最好使用异步调用。这样做时，浏览器立即返回到其工作，并在后台简单地监听HTTP响应。当响应到达时，将调用您的成功处理程序。

- Pointy

Answer 2

当您进行阻塞I/O时，程序会暂停直到接收到输入。在JS中，当执行同步调用时，程序会暂停并且浏览器窗口会冻结（无法进行任何绘制），直到响应被接收。在大多数情况下，可以避免使用同步调用和任何形式的阻塞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 中的 ajax 调用，示例

- Amjad Masad

Answer 3

这就是你要找的 - .ajaxStart()

当任何ajax事件开始时，它将被触发。

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

他们甚至给出了一个类似于你所尝试完成的具体示例：

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

你可以使用 .ajaxStop() 函数。

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

- dubRun

---

这并非如此。 当ajax调用为async == true时，它可以工作，但在我们的情况下，浏览器本身暂停了线程，因此一切都被阻塞（包括UI更新）- 浏览器就会冻结。 - nadavy